8c:I[903690,["/chat-static/_next/static/chunks/0e2tb6ztxas0b.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1f7u6rgo4cul0.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/05pq8s6zv_wn1.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/43vadfihbvtl1.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1gycrwvtm60qn.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3wkp7zrf5-jmz.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3xh9s6el8_6_x.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0ke63s91gpvy3.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1ccgxhg3rjfjo.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0vd414frz2dl_.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2mgce5j5u79tt.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/01gmrqojqtlsu.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2qjug_t8m8oho.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2womqu661fmr2.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0qdgtnqed6832.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1po5wfdz3ceh_.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1lmne7b3yag00.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/330f8n_uwn2ft.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0h7t4vk9gyu0g.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/160o23x6urtdh.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1qov2bia_ns-o.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/10xq309qhj3gr.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/04t51g7mb5zjz.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1m_h06jid1ekf.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/34kx6djl8qij7.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3hwyfh3v3lizg.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3y2nzgu33897a.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2xm81q215cv7s.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3vtvee1raa1hh.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0ylrm5ajfx1z7.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0j_lsstp2mbsx.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0aas_nxnpj24g.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/42h7tmr-x85i0.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1pycny3zv2irk.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2nrg64o7044ea.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2wb66rh9_-phb.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2934g55qd7tuc.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/111x4t_autsmc.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/18ivfh5uja4t0.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2r3_xwoqt-j-8.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu"],"ExplicitChatIdProvider"] 8d:I[838238,["/chat-static/_next/static/chunks/0e2tb6ztxas0b.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1f7u6rgo4cul0.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/05pq8s6zv_wn1.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/43vadfihbvtl1.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1gycrwvtm60qn.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3wkp7zrf5-jmz.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3xh9s6el8_6_x.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0ke63s91gpvy3.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1ccgxhg3rjfjo.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0vd414frz2dl_.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2mgce5j5u79tt.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/01gmrqojqtlsu.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2qjug_t8m8oho.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2womqu661fmr2.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0qdgtnqed6832.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1po5wfdz3ceh_.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1lmne7b3yag00.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/330f8n_uwn2ft.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0h7t4vk9gyu0g.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/160o23x6urtdh.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1qov2bia_ns-o.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/10xq309qhj3gr.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/04t51g7mb5zjz.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1m_h06jid1ekf.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/34kx6djl8qij7.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3hwyfh3v3lizg.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3y2nzgu33897a.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2xm81q215cv7s.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3vtvee1raa1hh.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0ylrm5ajfx1z7.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0j_lsstp2mbsx.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0aas_nxnpj24g.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/42h7tmr-x85i0.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1pycny3zv2irk.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2nrg64o7044ea.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2wb66rh9_-phb.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2934g55qd7tuc.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/111x4t_autsmc.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/18ivfh5uja4t0.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2r3_xwoqt-j-8.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu"],"SWRDataProvider"] 8e:T24bec,[V0_FILE]css:file="app/globals.css" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { /* LegalFlow Dark Teal Theme */ --background: oklch(0.985 0.005 180); --foreground: oklch(0.2 0.02 200); --card: oklch(1 0 0); --card-foreground: oklch(0.2 0.02 200); --popover: oklch(1 0 0); --popover-foreground: oklch(0.2 0.02 200); --primary: oklch(0.45 0.12 180); --primary-foreground: oklch(0.98 0 0); --secondary: oklch(0.96 0.01 180); --secondary-foreground: oklch(0.25 0.02 200); --muted: oklch(0.96 0.01 180); --muted-foreground: oklch(0.5 0.02 200); --accent: oklch(0.75 0.15 70); --accent-foreground: oklch(0.25 0.05 70); --destructive: oklch(0.55 0.22 25); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.9 0.01 180); --input: oklch(0.9 0.01 180); --ring: oklch(0.45 0.12 180); --chart-1: oklch(0.45 0.12 180); --chart-2: oklch(0.75 0.15 70); --chart-3: oklch(0.55 0.15 150); --chart-4: oklch(0.65 0.12 200); --chart-5: oklch(0.6 0.18 30); --radius: 0.625rem; --sidebar: oklch(0.22 0.04 200); --sidebar-foreground: oklch(0.95 0.01 180); --sidebar-primary: oklch(0.5 0.12 180); --sidebar-primary-foreground: oklch(0.98 0 0); --sidebar-accent: oklch(0.3 0.04 200); --sidebar-accent-foreground: oklch(0.95 0.01 180); --sidebar-border: oklch(0.35 0.03 200); --sidebar-ring: oklch(0.5 0.12 180); /* Status colors */ --status-new: oklch(0.45 0.12 180); --status-in-review: oklch(0.75 0.15 70); --status-pending: oklch(0.7 0.12 60); --status-approved: oklch(0.55 0.15 150); --status-rejected: oklch(0.55 0.22 25); --status-completed: oklch(0.55 0.15 150); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: 'Geist', 'Geist Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); --color-status-new: var(--status-new); --color-status-in-review: var(--status-in-review); --color-status-pending: var(--status-pending); --color-status-approved: var(--status-approved); --color-status-rejected: var(--status-rejected); --color-status-completed: var(--status-completed); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "ai": "6.0.66", "@ai-sdk/react": "3.0.68" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescript:file="lib/mock-data.ts" isMerged="true" import type { Ticket, User } from './types' // Helper to create dates relative to now const daysAgo = (days: number) => { const date = new Date() date.setDate(date.getDate() - days) return date } const hoursAgo = (hours: number) => { const date = new Date() date.setHours(date.getHours() - hours) return date } export const MOCK_USERS: User[] = [ { id: 'user-1', name: 'Sarah Chen', email: 'sarah.chen@company.com', role: 'requester' }, { id: 'user-2', name: 'Michael Torres', email: 'michael.torres@company.com', role: 'requester' }, { id: 'user-3', name: 'Emily Watson', email: 'emily.watson@company.com', role: 'requester' }, { id: 'user-4', name: 'James Liu', email: 'james.liu@company.com', role: 'requester' }, { id: 'legal-1', name: 'Alexandra Park', email: 'alexandra.park@legal.com', role: 'legal_team' }, { id: 'legal-2', name: 'David Kim', email: 'david.kim@legal.com', role: 'legal_team' }, { id: 'legal-3', name: 'Rachel Green', email: 'rachel.green@legal.com', role: 'legal_team' }, ] export const MOCK_TICKETS: Ticket[] = [ { id: 'ticket-001', title: 'Vendor Services Agreement Review', description: 'Need legal review of a new vendor services agreement with CloudTech Solutions. The contract involves cloud infrastructure services for our production environment. Total contract value is $250,000 annually with a 3-year term.', requestType: 'contract_review', status: 'new', priority: 'high', requesterId: 'user-1', requesterName: 'Sarah Chen', requesterEmail: 'sarah.chen@company.com', createdAt: hoursAgo(2), updatedAt: hoursAgo(2), dueDate: daysAgo(-7), documents: [ { id: 'doc-001', name: 'CloudTech_Services_Agreement_v2.pdf', type: 'application/pdf', size: 2456789, uploadedAt: hoursAgo(2), uploadedBy: 'Sarah Chen', versions: [ { id: 'v1', version: 1, uploadedAt: hoursAgo(2), uploadedBy: 'Sarah Chen' } ] } ], comments: [], timeline: [ { id: 'tl-001', type: 'created', description: 'Ticket created', userId: 'user-1', userName: 'Sarah Chen', createdAt: hoursAgo(2), }, { id: 'tl-002', type: 'document_uploaded', description: 'Document uploaded: CloudTech_Services_Agreement_v2.pdf', userId: 'user-1', userName: 'Sarah Chen', createdAt: hoursAgo(2), } ], aiSummary: 'Cloud infrastructure services contract with CloudTech Solutions. Key terms include 3-year commitment, $250K annual value, and SLA requirements. Recommend review of liability clauses and data protection provisions.', aiRecommendations: [ 'Review indemnification clauses for adequate protection', 'Verify data privacy compliance with company standards', 'Check termination provisions and exit strategy' ], tags: ['vendor', 'cloud', 'high-value'] }, { id: 'ticket-002', title: 'NDA for Partnership Discussion', description: 'We need a mutual NDA prepared for preliminary partnership discussions with TechStart Inc. They are a Series B startup in the AI space and we are exploring potential integration opportunities.', requestType: 'nda', status: 'in_review', priority: 'medium', requesterId: 'user-2', requesterName: 'Michael Torres', requesterEmail: 'michael.torres@company.com', assigneeId: 'legal-1', assigneeName: 'Alexandra Park', createdAt: daysAgo(3), updatedAt: daysAgo(1), documents: [], comments: [ { id: 'comment-001', content: 'I have prepared a draft NDA using our standard mutual template. Please review and let me know if there are any specific provisions you need.', authorId: 'legal-1', authorName: 'Alexandra Park', authorRole: 'legal_team', createdAt: daysAgo(1), } ], timeline: [ { id: 'tl-003', type: 'created', description: 'Ticket created', userId: 'user-2', userName: 'Michael Torres', createdAt: daysAgo(3), }, { id: 'tl-004', type: 'assigned', description: 'Assigned to Alexandra Park', userId: 'legal-1', userName: 'Alexandra Park', createdAt: daysAgo(2), }, { id: 'tl-005', type: 'status_change', description: 'Status changed to In Review', userId: 'legal-1', userName: 'Alexandra Park', createdAt: daysAgo(2), }, { id: 'tl-006', type: 'comment', description: 'Comment added', userId: 'legal-1', userName: 'Alexandra Park', createdAt: daysAgo(1), } ], tags: ['partnership', 'nda', 'startup'] }, { id: 'ticket-003', title: 'GDPR Compliance Assessment', description: 'Request for legal guidance on GDPR compliance for our new EU customer data processing. We are expanding operations to Germany and France and need to ensure our data practices are compliant.', requestType: 'compliance', status: 'in_review', priority: 'urgent', requesterId: 'user-3', requesterName: 'Emily Watson', requesterEmail: 'emily.watson@company.com', assigneeId: 'legal-2', assigneeName: 'David Kim', createdAt: daysAgo(5), updatedAt: hoursAgo(6), dueDate: daysAgo(-3), documents: [ { id: 'doc-002', name: 'Current_Data_Processing_Procedures.docx', type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', size: 156789, uploadedAt: daysAgo(5), uploadedBy: 'Emily Watson', versions: [ { id: 'v1', version: 1, uploadedAt: daysAgo(5), uploadedBy: 'Emily Watson' } ] }, { id: 'doc-003', name: 'EU_Expansion_Plan.pdf', type: 'application/pdf', size: 892345, uploadedAt: daysAgo(4), uploadedBy: 'Emily Watson', versions: [ { id: 'v1', version: 1, uploadedAt: daysAgo(4), uploadedBy: 'Emily Watson' } ] } ], comments: [ { id: 'comment-002', content: 'I have reviewed the documents. We will need to implement several changes to meet GDPR requirements. Scheduling a call to discuss.', authorId: 'legal-2', authorName: 'David Kim', authorRole: 'legal_team', createdAt: daysAgo(3), isInternal: false, }, { id: 'comment-003', content: 'Internal note: Need to involve external EU counsel for DPA review.', authorId: 'legal-2', authorName: 'David Kim', authorRole: 'legal_team', createdAt: daysAgo(2), isInternal: true, } ], timeline: [ { id: 'tl-007', type: 'created', description: 'Ticket created', userId: 'user-3', userName: 'Emily Watson', createdAt: daysAgo(5), }, { id: 'tl-008', type: 'ai_analysis', description: 'AI analysis completed', createdAt: daysAgo(5), }, { id: 'tl-009', type: 'assigned', description: 'Assigned to David Kim', userId: 'legal-2', userName: 'David Kim', createdAt: daysAgo(4), }, { id: 'tl-010', type: 'status_change', description: 'Status changed to In Review', userId: 'legal-2', userName: 'David Kim', createdAt: daysAgo(4), } ], aiSummary: 'GDPR compliance review needed for EU expansion to Germany and France. Current data processing procedures require significant updates. Key areas: consent mechanisms, data subject rights, cross-border transfers.', aiRecommendations: [ 'Appoint a Data Protection Officer', 'Update privacy policy for EU requirements', 'Implement data subject access request procedures', 'Review data retention policies' ], tags: ['gdpr', 'compliance', 'eu', 'urgent'] }, { id: 'ticket-004', title: 'Patent Application Review', description: 'Review of patent application for our new machine learning algorithm. The invention relates to novel methods for real-time data processing optimization.', requestType: 'ip', status: 'pending_info', priority: 'medium', requesterId: 'user-4', requesterName: 'James Liu', requesterEmail: 'james.liu@company.com', assigneeId: 'legal-3', assigneeName: 'Rachel Green', createdAt: daysAgo(10), updatedAt: daysAgo(2), documents: [ { id: 'doc-004', name: 'Patent_Draft_ML_Algorithm.pdf', type: 'application/pdf', size: 3456789, uploadedAt: daysAgo(10), uploadedBy: 'James Liu', versions: [ { id: 'v1', version: 1, uploadedAt: daysAgo(10), uploadedBy: 'James Liu' }, { id: 'v2', version: 2, uploadedAt: daysAgo(5), uploadedBy: 'James Liu', notes: 'Added technical diagrams' } ] } ], comments: [ { id: 'comment-004', content: 'The patent draft looks promising. However, I need additional technical specifications for claims 3 and 4. Can you provide more details on the algorithm\'s unique processing method?', authorId: 'legal-3', authorName: 'Rachel Green', authorRole: 'legal_team', createdAt: daysAgo(2), } ], timeline: [ { id: 'tl-011', type: 'created', description: 'Ticket created', userId: 'user-4', userName: 'James Liu', createdAt: daysAgo(10), }, { id: 'tl-012', type: 'assigned', description: 'Assigned to Rachel Green', userId: 'legal-3', userName: 'Rachel Green', createdAt: daysAgo(8), }, { id: 'tl-013', type: 'status_change', description: 'Status changed to Pending Info', userId: 'legal-3', userName: 'Rachel Green', createdAt: daysAgo(2), } ], tags: ['patent', 'ml', 'innovation'] }, { id: 'ticket-005', title: 'Executive Employment Agreement', description: 'Need review and preparation of employment agreement for incoming VP of Engineering. Package includes equity compensation, severance terms, and non-compete provisions.', requestType: 'employment', status: 'approved', priority: 'high', requesterId: 'user-1', requesterName: 'Sarah Chen', requesterEmail: 'sarah.chen@company.com', assigneeId: 'legal-1', assigneeName: 'Alexandra Park', createdAt: daysAgo(14), updatedAt: daysAgo(3), documents: [ { id: 'doc-005', name: 'Executive_Agreement_Template.docx', type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', size: 234567, uploadedAt: daysAgo(14), uploadedBy: 'Sarah Chen', versions: [ { id: 'v1', version: 1, uploadedAt: daysAgo(14), uploadedBy: 'Sarah Chen' } ] }, { id: 'doc-006', name: 'VP_Engineering_Offer_Terms.pdf', type: 'application/pdf', size: 123456, uploadedAt: daysAgo(14), uploadedBy: 'Sarah Chen', versions: [ { id: 'v1', version: 1, uploadedAt: daysAgo(14), uploadedBy: 'Sarah Chen' } ] }, { id: 'doc-007', name: 'Final_Employment_Agreement.pdf', type: 'application/pdf', size: 345678, uploadedAt: daysAgo(3), uploadedBy: 'Alexandra Park', versions: [ { id: 'v1', version: 1, uploadedAt: daysAgo(3), uploadedBy: 'Alexandra Park' } ] } ], comments: [ { id: 'comment-005', content: 'Agreement has been reviewed and finalized. All requested terms have been incorporated. Ready for signature.', authorId: 'legal-1', authorName: 'Alexandra Park', authorRole: 'legal_team', createdAt: daysAgo(3), } ], timeline: [ { id: 'tl-014', type: 'created', description: 'Ticket created', userId: 'user-1', userName: 'Sarah Chen', createdAt: daysAgo(14), }, { id: 'tl-015', type: 'assigned', description: 'Assigned to Alexandra Park', userId: 'legal-1', userName: 'Alexandra Park', createdAt: daysAgo(12), }, { id: 'tl-016', type: 'status_change', description: 'Status changed to In Review', userId: 'legal-1', userName: 'Alexandra Park', createdAt: daysAgo(12), }, { id: 'tl-017', type: 'status_change', description: 'Status changed to Approved', userId: 'legal-1', userName: 'Alexandra Park', createdAt: daysAgo(3), }, { id: 'tl-018', type: 'document_uploaded', description: 'Final agreement uploaded', userId: 'legal-1', userName: 'Alexandra Park', createdAt: daysAgo(3), } ], tags: ['executive', 'employment', 'equity'] }, { id: 'ticket-006', title: 'Software License Agreement', description: 'Review of enterprise software license agreement from DataViz Corp. This is for our internal analytics platform upgrade. Annual license fee is $75,000.', requestType: 'contract_review', status: 'completed', priority: 'low', requesterId: 'user-2', requesterName: 'Michael Torres', requesterEmail: 'michael.torres@company.com', assigneeId: 'legal-2', assigneeName: 'David Kim', createdAt: daysAgo(21), updatedAt: daysAgo(7), documents: [ { id: 'doc-008', name: 'DataViz_License_Agreement.pdf', type: 'application/pdf', size: 567890, uploadedAt: daysAgo(21), uploadedBy: 'Michael Torres', versions: [ { id: 'v1', version: 1, uploadedAt: daysAgo(21), uploadedBy: 'Michael Torres' } ] } ], comments: [ { id: 'comment-006', content: 'Review completed. Agreement is standard and acceptable. Recommend signing.', authorId: 'legal-2', authorName: 'David Kim', authorRole: 'legal_team', createdAt: daysAgo(7), } ], timeline: [ { id: 'tl-019', type: 'created', description: 'Ticket created', userId: 'user-2', userName: 'Michael Torres', createdAt: daysAgo(21), }, { id: 'tl-020', type: 'assigned', description: 'Assigned to David Kim', userId: 'legal-2', userName: 'David Kim', createdAt: daysAgo(18), }, { id: 'tl-021', type: 'status_change', description: 'Status changed to Completed', userId: 'legal-2', userName: 'David Kim', createdAt: daysAgo(7), } ], tags: ['software', 'license', 'vendor'] }, { id: 'ticket-007', title: 'Contractor NDA - Marketing Agency', description: 'Standard NDA needed for our new marketing agency partner, Creative Solutions. They will have access to unreleased product information for campaign development.', requestType: 'nda', status: 'new', priority: 'medium', requesterId: 'user-3', requesterName: 'Emily Watson', requesterEmail: 'emily.watson@company.com', createdAt: hoursAgo(5), updatedAt: hoursAgo(5), documents: [], comments: [], timeline: [ { id: 'tl-022', type: 'created', description: 'Ticket created', userId: 'user-3', userName: 'Emily Watson', createdAt: hoursAgo(5), }, { id: 'tl-023', type: 'ai_analysis', description: 'AI analysis completed', createdAt: hoursAgo(5), } ], aiSummary: 'Standard one-way NDA request for marketing agency contractor. Will need protection for unreleased product information. Recommend using standard contractor NDA template with 2-year term.', aiRecommendations: [ 'Use standard contractor NDA template', 'Include specific provisions for marketing materials', 'Set 2-year confidentiality term' ], tags: ['nda', 'contractor', 'marketing'] }, { id: 'ticket-008', title: 'Terms of Service Update', description: 'Request to review and update our customer-facing Terms of Service. Need to add new provisions for our AI-powered features and update data processing terms.', requestType: 'other', status: 'rejected', priority: 'low', requesterId: 'user-4', requesterName: 'James Liu', requesterEmail: 'james.liu@company.com', assigneeId: 'legal-3', assigneeName: 'Rachel Green', createdAt: daysAgo(30), updatedAt: daysAgo(25), documents: [], comments: [ { id: 'comment-007', content: 'After discussion with leadership, we have decided to defer the ToS update until Q2 when the AI features are finalized. Please resubmit at that time with complete feature specifications.', authorId: 'legal-3', authorName: 'Rachel Green', authorRole: 'legal_team', createdAt: daysAgo(25), } ], timeline: [ { id: 'tl-024', type: 'created', description: 'Ticket created', userId: 'user-4', userName: 'James Liu', createdAt: daysAgo(30), }, { id: 'tl-025', type: 'assigned', description: 'Assigned to Rachel Green', userId: 'legal-3', userName: 'Rachel Green', createdAt: daysAgo(28), }, { id: 'tl-026', type: 'status_change', description: 'Status changed to Rejected', userId: 'legal-3', userName: 'Rachel Green', createdAt: daysAgo(25), } ], tags: ['tos', 'deferred'] } ] // Current user for the mock - will be controlled by role toggle export const CURRENT_REQUESTER: User = MOCK_USERS[0] export const CURRENT_LEGAL_USER: User = MOCK_USERS[4] [V0_FILE]typescript:file="lib/types.ts" isMerged="true" export type UserRole = 'requester' | 'legal_team' export type RequestType = | 'contract_review' | 'nda' | 'compliance' | 'ip' | 'employment' | 'other' export type TicketStatus = | 'new' | 'in_review' | 'pending_info' | 'approved' | 'rejected' | 'completed' export type Priority = 'low' | 'medium' | 'high' | 'urgent' export interface DocumentVersion { id: string version: number uploadedAt: Date uploadedBy: string notes?: string } export interface Document { id: string name: string type: string size: number uploadedAt: Date uploadedBy: string versions: DocumentVersion[] } export interface Comment { id: string content: string authorId: string authorName: string authorRole: UserRole createdAt: Date isInternal?: boolean } export interface TimelineEvent { id: string type: 'created' | 'status_change' | 'comment' | 'document_uploaded' | 'assigned' | 'ai_analysis' description: string userId?: string userName?: string createdAt: Date metadata?: Record } export interface Ticket { id: string title: string description: string requestType: RequestType status: TicketStatus priority: Priority requesterId: string requesterName: string requesterEmail: string assigneeId?: string assigneeName?: string createdAt: Date updatedAt: Date dueDate?: Date documents: Document[] comments: Comment[] timeline: TimelineEvent[] aiSummary?: string aiRecommendations?: string[] tags?: string[] } export interface AgentConfig { model: string temperature: number systemPrompt: string maxTokens: number tools: string[] } export interface User { id: string name: string email: string role: UserRole avatar?: string } [V0_FILE]typescriptreact:file="lib/app-context.tsx" isMerged="true" 'use client' import { createContext, useContext, useState, useCallback, type ReactNode } from 'react' import type { Ticket, UserRole, AgentConfig, User, TicketStatus } from './types' import { MOCK_TICKETS, CURRENT_REQUESTER, CURRENT_LEGAL_USER } from './mock-data' import { DEFAULT_AGENT_CONFIG } from './constants' interface AppContextType { // User & Role currentRole: UserRole setCurrentRole: (role: UserRole) => void currentUser: User // Tickets tickets: Ticket[] addTicket: (ticket: Ticket) => void updateTicket: (id: string, updates: Partial) => void getTicketById: (id: string) => Ticket | undefined getTicketsByStatus: (status: TicketStatus) => Ticket[] getTicketsForRequester: (requesterId: string) => Ticket[] // Agent Config agentConfig: AgentConfig setAgentConfig: (config: AgentConfig) => void // UI State selectedStatuses: TicketStatus[] setSelectedStatuses: (statuses: TicketStatus[]) => void toggleStatus: (status: TicketStatus) => void } const AppContext = createContext(null) export function AppProvider({ children }: { children: ReactNode }) { const [currentRole, setCurrentRole] = useState('legal_team') const [tickets, setTickets] = useState(MOCK_TICKETS) const [agentConfig, setAgentConfig] = useState(DEFAULT_AGENT_CONFIG) const [selectedStatuses, setSelectedStatuses] = useState([]) const currentUser = currentRole === 'legal_team' ? CURRENT_LEGAL_USER : CURRENT_REQUESTER const addTicket = useCallback((ticket: Ticket) => { setTickets(prev => [ticket, ...prev]) }, []) const updateTicket = useCallback((id: string, updates: Partial) => { setTickets(prev => prev.map(t => t.id === id ? { ...t, ...updates, updatedAt: new Date() } : t )) }, []) const getTicketById = useCallback((id: string) => { return tickets.find(t => t.id === id) }, [tickets]) const getTicketsByStatus = useCallback((status: TicketStatus) => { return tickets.filter(t => t.status === status) }, [tickets]) const getTicketsForRequester = useCallback((requesterId: string) => { return tickets.filter(t => t.requesterId === requesterId) }, [tickets]) const toggleStatus = useCallback((status: TicketStatus) => { setSelectedStatuses(prev => { if (prev.includes(status)) { const newStatuses = prev.filter(s => s !== status) return newStatuses } return [...prev, status] }) }, []) return ( {children} ) } export function useApp() { const context = useContext(AppContext) if (!context) { throw new Error('useApp must be used within an AppProvider') } return context } [V0_FILE]typescriptreact:file="components/layout/mobile-nav.tsx" isMerged="true" 'use client' import { usePathname, useRouter } from 'next/navigation' import { LayoutDashboard, FileText, PlusCircle, Settings, Scale, FolderOpen, X, } from 'lucide-react' import { Button } from '@/components/ui/button' import { Switch } from '@/components/ui/switch' import { Label } from '@/components/ui/label' import { useApp } from '@/lib/app-context' import { cn } from '@/lib/utils' interface MobileNavProps { open: boolean onOpenChange: (open: boolean) => void } const legalTeamNav = [ { title: 'Dashboard', href: '/dashboard', icon: LayoutDashboard }, { title: 'All Tickets', href: '/tickets', icon: FolderOpen }, { title: 'New Request', href: '/intake', icon: PlusCircle }, { title: 'Settings', href: '/settings', icon: Settings }, ] const requesterNav = [ { title: 'My Requests', href: '/my-requests', icon: FileText }, { title: 'New Request', href: '/intake', icon: PlusCircle }, { title: 'Settings', href: '/settings', icon: Settings }, ] export function MobileNav({ open, onOpenChange }: MobileNavProps) { const pathname = usePathname() const router = useRouter() const { currentRole, setCurrentRole, currentUser } = useApp() const navItems = currentRole === 'legal_team' ? legalTeamNav : requesterNav const handleNavClick = (href: string) => { router.push(href) onOpenChange(false) } const handleRoleToggle = (checked: boolean) => { setCurrentRole(checked ? 'legal_team' : 'requester') } if (!open) return null return (

{/* Backdrop */}

onOpenChange(false)} /> {/* Full screen menu - slides in from right */}

{/* Header */}

LegalFlow

{/* Navigation */}

{/* Footer with role toggle and user info */}

{/* Role Toggle */}

View as:

Requester Legal

{/* User info */}

{currentUser.name.split(' ').map(n => n[0]).join('')}

{currentUser.name} {currentRole.replace('_', ' ')}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" 'use client' import { useEffect } from 'react' import { useRouter } from 'next/navigation' import { useApp } from '@/lib/app-context' export default function HomePage() { const router = useRouter() const { currentRole } = useApp() useEffect(() => { // Redirect based on role if (currentRole === 'legal_team') { router.replace('/dashboard') } else { router.replace('/my-requests') } }, [currentRole, router]) // Show loading state while redirecting return (

) } [V0_FILE]typescriptreact:file="components/dashboard/ticket-list.tsx" isMerged="true" 'use client' import { TicketCard } from './ticket-card' import type { Ticket } from '@/lib/types' interface TicketListProps { tickets: Ticket[] } export function TicketList({ tickets }: TicketListProps) { if (tickets.length === 0) { return (

No tickets found

) } return (

{tickets.map(ticket => ( ))}

) } [V0_FILE]typescriptreact:file="components/dashboard/status-filters.tsx" isMerged="true" 'use client' import { Button } from '@/components/ui/button' import type { TicketStatus } from '@/lib/types' import { STATUS_LABELS } from '@/lib/constants' import { cn } from '@/lib/utils' import { useApp } from '@/lib/app-context' const ALL_STATUSES: TicketStatus[] = ['new', 'in_review', 'pending_info', 'approved', 'rejected', 'completed'] interface StatusFiltersProps { showAllStatuses?: boolean } export function StatusFilters({ showAllStatuses = true }: StatusFiltersProps) { const { selectedStatuses, toggleStatus, setSelectedStatuses, tickets } = useApp() const statusCounts = ALL_STATUSES.reduce((acc, status) => { acc[status] = tickets.filter(t => t.status === status).length return acc }, {} as Record) const handleChipClick = (status: TicketStatus) => { // If only this status is selected, clicking it deselects (shows all) if (selectedStatuses.length === 1 && selectedStatuses[0] === status) { setSelectedStatuses([]) } else { toggleStatus(status) } } const displayStatuses = showAllStatuses ? ALL_STATUSES : ALL_STATUSES.filter(s => !['rejected', 'completed'].includes(s)) return (

{displayStatuses.map((status) => { const isSelected = selectedStatuses.includes(status) const count = statusCounts[status] return ( ) })} {selectedStatuses.length > 0 && ( )}

) } [V0_FILE]typescriptreact:file="components/dashboard/ticket-kanban.tsx" isMerged="true" 'use client' import { useMemo } from 'react' import { TicketCard } from './ticket-card' import type { Ticket, TicketStatus } from '@/lib/types' import { STATUS_LABELS, KANBAN_COLUMNS } from '@/lib/constants' import { cn } from '@/lib/utils' interface TicketKanbanProps { tickets: Ticket[] selectedStatuses: TicketStatus[] } export function TicketKanban({ tickets, selectedStatuses }: TicketKanbanProps) { const columnData = useMemo(() => { return KANBAN_COLUMNS.map(status => ({ status, tickets: tickets.filter(t => t.status === status), })) }, [tickets]) // Filter columns if statuses are selected const displayColumns = selectedStatuses.length > 0 ? columnData.filter(col => selectedStatuses.includes(col.status)) : columnData const getColumnColor = (status: TicketStatus) => { switch (status) { case 'new': return 'border-t-status-new' case 'in_review': return 'border-t-status-in-review' case 'pending_info': return 'border-t-status-pending' case 'approved': return 'border-t-status-approved' case 'completed': return 'border-t-status-completed' default: return 'border-t-muted-foreground' } } return (

{displayColumns.map(({ status, tickets: columnTickets }) => (

{/* Column Header */}

{STATUS_LABELS[status]}

{columnTickets.length}

{/* Column Content */}

{columnTickets.length === 0 ? (

No tickets

) : ( columnTickets.map(ticket => ( )) )}

))}

) } [V0_FILE]typescriptreact:file="app/tickets/page.tsx" isMerged="true" 'use client' import { useMemo, useState } from 'react' import { Search, SlidersHorizontal } from 'lucide-react' import { Input } from '@/components/ui/input' import { Button } from '@/components/ui/button' import { DropdownMenu, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuCheckboxItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' import { TicketList } from '@/components/dashboard/ticket-list' import { StatusFilters } from '@/components/dashboard/status-filters' import { useApp } from '@/lib/app-context' import type { RequestType } from '@/lib/types' import { REQUEST_TYPE_LABELS } from '@/lib/constants' const ALL_REQUEST_TYPES: RequestType[] = ['contract_review', 'nda', 'compliance', 'ip', 'employment', 'other'] export default function AllTicketsPage() { const { tickets, selectedStatuses } = useApp() const [searchQuery, setSearchQuery] = useState('') const [selectedTypes, setSelectedTypes] = useState([]) const filteredTickets = useMemo(() => { let filtered = tickets // Filter by status if (selectedStatuses.length > 0) { filtered = filtered.filter(t => selectedStatuses.includes(t.status)) } // Filter by request type if (selectedTypes.length > 0) { filtered = filtered.filter(t => selectedTypes.includes(t.requestType)) } // Filter by search query if (searchQuery.trim()) { const query = searchQuery.toLowerCase() filtered = filtered.filter(t => t.title.toLowerCase().includes(query) || t.description.toLowerCase().includes(query) || t.requesterName.toLowerCase().includes(query) ) } return filtered.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime()) }, [tickets, selectedStatuses, selectedTypes, searchQuery]) const toggleRequestType = (type: RequestType) => { setSelectedTypes(prev => prev.includes(type) ? prev.filter(t => t !== type) : [...prev, type] ) } return (

{/* Header */}

All Tickets

Browse and search all legal requests

{/* Search & Filters */}

setSearchQuery(e.target.value)} className="pl-9" />

Request Type {ALL_REQUEST_TYPES.map(type => ( toggleRequestType(type)} > {REQUEST_TYPE_LABELS[type]} ))} {selectedTypes.length > 0 && ( <> )}

{/* Status Filters */} {/* Results */}

{filteredTickets.length} ticket{filteredTickets.length !== 1 ? 's' : ''} found

) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isMerged="true" 'use client' import { useMemo, useState } from 'react' import { PlusCircle, LayoutGrid, List } from 'lucide-react' import Link from 'next/link' import { Button } from '@/components/ui/button' import { TicketKanban } from '@/components/dashboard/ticket-kanban' import { TicketList } from '@/components/dashboard/ticket-list' import { StatusFilters } from '@/components/dashboard/status-filters' import { useApp } from '@/lib/app-context' type ViewMode = 'kanban' | 'list' export default function DashboardPage() { const { tickets, selectedStatuses } = useApp() const [viewMode, setViewMode] = useState('kanban') const filteredTickets = useMemo(() => { if (selectedStatuses.length === 0) return tickets return tickets.filter(t => selectedStatuses.includes(t.status)) }, [tickets, selectedStatuses]) const stats = useMemo(() => ({ total: tickets.length, new: tickets.filter(t => t.status === 'new').length, inReview: tickets.filter(t => t.status === 'in_review').length, urgent: tickets.filter(t => t.priority === 'urgent').length, }), [tickets]) return (

{/* Header */}

Dashboard

Manage and track all legal requests

{/* Quick Stats */}

Total Tickets

{stats.total}

New

{stats.new}

In Review

{stats.inReview}

Urgent

{stats.urgent}

{/* Filters & View Toggle */}

{/* Ticket Views */} {viewMode === 'kanban' ? ( ) : ( )}

) } [V0_FILE]typescriptreact:file="app/my-requests/page.tsx" isMerged="true" 'use client' import { useMemo } from 'react' import { PlusCircle, FileText } from 'lucide-react' import Link from 'next/link' import { Button } from '@/components/ui/button' import { TicketList } from '@/components/dashboard/ticket-list' import { StatusFilters } from '@/components/dashboard/status-filters' import { useApp } from '@/lib/app-context' export default function MyRequestsPage() { const { tickets, currentUser, selectedStatuses } = useApp() const myTickets = useMemo(() => { let filtered = tickets.filter(t => t.requesterId === currentUser.id) if (selectedStatuses.length > 0) { filtered = filtered.filter(t => selectedStatuses.includes(t.status)) } return filtered.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime()) }, [tickets, currentUser.id, selectedStatuses]) const stats = useMemo(() => ({ total: tickets.filter(t => t.requesterId === currentUser.id).length, pending: tickets.filter(t => t.requesterId === currentUser.id && ['new', 'in_review', 'pending_info'].includes(t.status) ).length, completed: tickets.filter(t => t.requesterId === currentUser.id && ['approved', 'completed'].includes(t.status) ).length, }), [tickets, currentUser.id]) return (

{/* Header */}

My Requests

Track the status of your legal requests

{/* Quick Stats */}

Total Requests

{stats.total}

In Progress

{stats.pending}

Completed

{stats.completed}

{/* Filters */} {/* Ticket List */} {myTickets.length === 0 ? (

No requests yet

Create your first legal request to get started

) : ( )}

) } [V0_FILE]typescript:file="app/api/intake/route.ts" isMerged="true" import { consumeStream, convertToModelMessages, streamText, type UIMessage, } from 'ai' export const maxDuration = 30 const INTAKE_SYSTEM_PROMPT = `You are LegalFlow AI, an intelligent legal intake assistant. Your role is to help users submit legal requests by gathering all necessary information in a friendly, conversational manner. ## Your Approach 1. Start by warmly greeting the user and asking what type of legal matter they need help with 2. Based on their response, ask relevant follow-up questions one at a time 3. Be empathetic and professional - legal matters can be stressful 4. After gathering key information, summarize what you've learned and confirm it's accurate 5. Guide them to upload any relevant documents 6. When you have enough information, let them know you're ready to create their ticket ## Request Types to Identify - Contract Review: Business contracts, vendor agreements, licensing - NDA: Non-disclosure agreements for partnerships, employees, contractors - Compliance: GDPR, regulatory matters, policy reviews - Intellectual Property: Patents, trademarks, copyright - Employment: Hiring agreements, terminations, HR legal matters - Other: General legal inquiries ## Information to Gather - Clear description of the legal matter - Timeline/urgency level - Relevant parties involved - Any existing documents that need review - Specific questions or concerns they have - Preferred outcome or goals ## Important Guidelines - Ask ONE question at a time to avoid overwhelming the user - Use plain language, avoid legal jargon unless the user seems familiar with it - If something is unclear, ask for clarification - Be helpful but don't provide legal advice - you're gathering information for the legal team - When the user indicates they're done or you have enough info, summarize and confirm Remember: Your goal is to make submitting a legal request as easy and stress-free as possible while ensuring the legal team has all the information they need.` export async function POST(req: Request) { const { messages }: { messages: UIMessage[] } = await req.json() const result = streamText({ model: 'openai/gpt-4o', system: INTAKE_SYSTEM_PROMPT, messages: await convertToModelMessages(messages), abortSignal: req.signal, }) return result.toUIMessageStreamResponse({ originalMessages: messages, consumeSseStream: consumeStream, }) } [V0_FILE]typescriptreact:file="components/intake/document-upload.tsx" isMerged="true" 'use client' import React from "react" import { useState, useRef } from 'react' import { Upload, File, X, FileText, FileSpreadsheet, FileImage } from 'lucide-react' import { Button } from '@/components/ui/button' import { cn } from '@/lib/utils' interface UploadedFile { id: string name: string size: number type: string } interface DocumentUploadProps { files: UploadedFile[] onFilesChange: (files: UploadedFile[]) => void maxFiles?: number } export function DocumentUpload({ files, onFilesChange, maxFiles = 5 }: DocumentUploadProps) { const [isDragging, setIsDragging] = useState(false) const inputRef = useRef(null) const formatFileSize = (bytes: number) => { if (bytes < 1024) return `${bytes} B` if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB` return `${(bytes / (1024 * 1024)).toFixed(1)} MB` } const getFileIcon = (type: string) => { if (type.includes('spreadsheet') || type.includes('excel') || type.includes('csv')) { return FileSpreadsheet } if (type.includes('image')) { return FileImage } return FileText } const handleFiles = (newFiles: FileList | null) => { if (!newFiles) return const filesToAdd: UploadedFile[] = [] const remaining = maxFiles - files.length for (let i = 0; i < Math.min(newFiles.length, remaining); i++) { const file = newFiles[i] filesToAdd.push({ id: `file-${Date.now()}-${i}`, name: file.name, size: file.size, type: file.type, }) } onFilesChange([...files, ...filesToAdd]) } const removeFile = (id: string) => { onFilesChange(files.filter(f => f.id !== id)) } const handleDragOver = (e: React.DragEvent) => { e.preventDefault() setIsDragging(true) } const handleDragLeave = (e: React.DragEvent) => { e.preventDefault() setIsDragging(false) } const handleDrop = (e: React.DragEvent) => { e.preventDefault() setIsDragging(false) handleFiles(e.dataTransfer.files) } const canAddMore = files.length < maxFiles return (

{/* Drop Zone */} {canAddMore && (

inputRef.current?.click()} onDragOver={handleDragOver} onDragLeave={handleDragLeave} onDrop={handleDrop} className={cn( 'border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors', isDragging ? 'border-primary bg-primary/5' : 'border-border hover:border-primary/50 hover:bg-muted/50' )} > handleFiles(e.target.files)} className="hidden" accept=".pdf,.doc,.docx,.txt,.xlsx,.xls,.csv,.png,.jpg,.jpeg" />

{isDragging ? 'Drop files here' : 'Click to upload or drag and drop'}

PDF, DOC, DOCX, XLS, XLSX, TXT, PNG, JPG (max {maxFiles} files)

)} {/* File List */} {files.length > 0 && (

Uploaded files ({files.length}/{maxFiles})

{files.map((file) => { const FileIcon = getFileIcon(file.type) return (

{file.name}

{formatFileSize(file.size)}

) })}

)}

) } [V0_FILE]typescriptreact:file="components/tickets/ticket-timeline.tsx" isMerged="true" 'use client' import { PlusCircle, MessageSquare, FileUp, UserPlus, RefreshCw, Sparkles } from 'lucide-react' import type { TimelineEvent } from '@/lib/types' import { cn } from '@/lib/utils' interface TicketTimelineProps { events: TimelineEvent[] } const EVENT_ICONS = { created: PlusCircle, status_change: RefreshCw, comment: MessageSquare, document_uploaded: FileUp, assigned: UserPlus, ai_analysis: Sparkles, } const EVENT_COLORS = { created: 'bg-primary text-primary-foreground', status_change: 'bg-accent text-accent-foreground', comment: 'bg-muted text-muted-foreground', document_uploaded: 'bg-primary/20 text-primary', assigned: 'bg-status-approved text-white', ai_analysis: 'bg-primary text-primary-foreground', } export function TicketTimeline({ events }: TicketTimelineProps) { const formatDate = (date: Date) => { return new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit', }).format(date) } const sortedEvents = [...events].sort( (a, b) => b.createdAt.getTime() - a.createdAt.getTime() ) return (

Activity Timeline

{/* Timeline line */}

{sortedEvents.map((event, index) => { const Icon = EVENT_ICONS[event.type] const colorClass = EVENT_COLORS[event.type] return (

{/* Icon */}

{/* Content */}

{event.description}

{event.userName && ( by {event.userName} )} {formatDate(event.createdAt)}

) })}

) } [V0_FILE]typescriptreact:file="components/tickets/ticket-comments.tsx" isMerged="true" 'use client' import React from "react" import { useState } from 'react' import { Send, Lock } from 'lucide-react' import { Button } from '@/components/ui/button' import { Textarea } from '@/components/ui/textarea' import { Checkbox } from '@/components/ui/checkbox' import { Label } from '@/components/ui/label' import type { Comment, UserRole } from '@/lib/types' import { cn } from '@/lib/utils' import { useApp } from '@/lib/app-context' interface TicketCommentsProps { comments: Comment[] onAddComment: (content: string, isInternal: boolean) => void } export function TicketComments({ comments, onAddComment }: TicketCommentsProps) { const { currentRole, currentUser } = useApp() const [newComment, setNewComment] = useState('') const [isInternal, setIsInternal] = useState(false) const formatDate = (date: Date) => { return new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit', }).format(date) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (!newComment.trim()) return onAddComment(newComment, isInternal) setNewComment('') setIsInternal(false) } // Filter comments based on role - requesters can't see internal comments const visibleComments = currentRole === 'legal_team' ? comments : comments.filter(c => !c.isInternal) const sortedComments = [...visibleComments].sort( (a, b) => a.createdAt.getTime() - b.createdAt.getTime() ) return (

Comments

{/* Comments List */}

{sortedComments.length === 0 ? (

No comments yet

) : ( sortedComments.map((comment) => { const isOwnComment = comment.authorId === currentUser.id const isLegalTeam = comment.authorRole === 'legal_team' return (

{comment.authorName.split(' ').map(n => n[0]).join('')}

{comment.authorName} {isOwnComment && ( (you) )}

{formatDate(comment.createdAt)}

{comment.isInternal && (

Internal

)}

{comment.content}

) }) )}

{/* Add Comment Form */}

setNewComment(e.target.value)}
          rows={3}
        />
        
        <div className="flex items-center justify-between">
          {currentRole === 'legal_team' && (
            <div className="flex items-center space-x-2">
              <Checkbox
                id="internal"
                checked={isInternal}
                onCheckedChange={(checked) => setIsInternal(checked === true)}
              />
              <Label
                htmlFor="internal"
                className="text-sm text-muted-foreground cursor-pointer"
              >
                Internal note (not visible to requester)
              </Label>
            </div>
          )}
          
          <Button type="submit" disabled={!newComment.trim()} className="ml-auto">
            <Send className="h-4 w-4 mr-2" />
            Post Comment
          </Button>
        </div>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/tickets/status-change-modal.tsx" isMerged="true"
'use client'

import { useState } from 'react'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { Label } from '@/components/ui/label'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import type { TicketStatus } from '@/lib/types'
import { STATUS_LABELS } from '@/lib/constants'

interface StatusChangeModalProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  currentStatus: TicketStatus
  onStatusChange: (newStatus: TicketStatus) => void
}

const ALL_STATUSES: TicketStatus[] = [
  'new',
  'in_review',
  'pending_info',
  'approved',
  'rejected',
  'completed',
]

export function StatusChangeModal({
  open,
  onOpenChange,
  currentStatus,
  onStatusChange,
}: StatusChangeModalProps) {
  const [selectedStatus, setSelectedStatus] = useState<TicketStatus>(currentStatus)

const handleSubmit = () => {
    if (selectedStatus !== currentStatus) {
      onStatusChange(selectedStatus)
    }
    onOpenChange(false)
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Change Status</DialogTitle>
          <DialogDescription>
            Update the status of this ticket
          </DialogDescription>
        </DialogHeader>
        
        <div className="space-y-4 py-4">
          <div className="space-y-2">
            <Label>New Status</Label>
            <Select
              value={selectedStatus}
              onValueChange={(value) => setSelectedStatus(value as TicketStatus)}
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {ALL_STATUSES.map((status) => (
                  <SelectItem key={status} value={status}>
                    {STATUS_LABELS[status]}
                    {status === currentStatus && ' (current)'}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </div>
        
        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            Cancel
          </Button>
          <Button 
            onClick={handleSubmit}
            disabled={selectedStatus === currentStatus}
          >
            Update Status
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/tickets/ticket-documents.tsx" isMerged="true"
'use client'

import { useState } from 'react'
import { FileText, Download, Clock, ChevronDown, ChevronUp } from 'lucide-react'
import { Button } from '@/components/ui/button'
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@/components/ui/collapsible'
import type { Document } from '@/lib/types'
import { cn } from '@/lib/utils'

interface TicketDocumentsProps {
  documents: Document[]
}

export function TicketDocuments({ documents }: TicketDocumentsProps) {
  const [expandedDoc, setExpandedDoc] = useState<string | null>(null)

const formatDate = (date: Date) => {
    return new Intl.DateTimeFormat('en-US', {
      month: 'short',
      day: 'numeric',
      year: 'numeric',
    }).format(date)
  }

const formatFileSize = (bytes: number) => {
    if (bytes < 1024) return `${bytes} B`
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
  }

if (documents.length === 0) {
    return (
      <div className="space-y-4">
        <h3 className="font-semibold text-foreground">Documents</h3>
        <p className="text-sm text-muted-foreground py-4 text-center">
          No documents attached
        </p>
      </div>
    )
  }

return (
    <div className="space-y-4">
      <h3 className="font-semibold text-foreground">
        Documents ({documents.length})
      </h3>

<div className="space-y-2">
        {documents.map((doc) => {
          const isExpanded = expandedDoc === doc.id
          const hasVersions = doc.versions.length > 1

return (
            <Collapsible
              key={doc.id}
              open={isExpanded}
              onOpenChange={(open) => setExpandedDoc(open ? doc.id : null)}
            >
              <div className="rounded-lg border border-border bg-card">
                <div className="flex items-center gap-3 p-3">
                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
                    <FileText className="h-5 w-5 text-primary" />
                  </div>
                  
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium truncate">{doc.name}</p>
                    <div className="flex items-center gap-2 text-xs text-muted-foreground">
                      <span>{formatFileSize(doc.size)}</span>
                      <span>-</span>
                      <span>Uploaded {formatDate(doc.uploadedAt)}</span>
                    </div>
                  </div>

<div className="flex items-center gap-2">
                    <Button variant="ghost" size="icon" className="h-8 w-8">
                      <Download className="h-4 w-4" />
                      <span className="sr-only">Download</span>
                    </Button>
                    
                    {hasVersions && (
                      <CollapsibleTrigger asChild>
                        <Button variant="ghost" size="sm" className="h-8">
                          <Clock className="h-4 w-4 mr-1" />
                          <span className="text-xs">{doc.versions.length} versions</span>
                          {isExpanded ? (
                            <ChevronUp className="h-4 w-4 ml-1" />
                          ) : (
                            <ChevronDown className="h-4 w-4 ml-1" />
                          )}
                        </Button>
                      </CollapsibleTrigger>
                    )}
                  </div>
                </div>

{hasVersions && (
                  <CollapsibleContent>
                    <div className="border-t border-border px-3 py-2 bg-muted/30">
                      <p className="text-xs font-medium text-muted-foreground mb-2">
                        Version History
                      </p>
                      <div className="space-y-2">
                        {doc.versions.map((version, index) => (
                          <div
                            key={version.id}
                            className={cn(
                              'flex items-center justify-between text-xs py-1.5',
                              index === 0 && 'font-medium'
                            )}
                          >
                            <div className="flex items-center gap-2">
                              <span className="text-muted-foreground">
                                v{version.version}
                              </span>
                              {index === 0 && (
                                <span className="bg-primary/10 text-primary px-1.5 py-0.5 rounded text-[10px]">
                                  Current
                                </span>
                              )}
                            </div>
                            <div className="flex items-center gap-3 text-muted-foreground">
                              <span>{version.uploadedBy}</span>
                              <span>{formatDate(version.uploadedAt)}</span>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  </CollapsibleContent>
                )}
              </div>
            </Collapsible>
          )
        })}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/settings/page.tsx" isMerged="true"
'use client'

import React from "react"

import { useState } from 'react'
import { Settings, Bot, User, Bell } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Switch } from '@/components/ui/switch'
import { Label } from '@/components/ui/label'
import { AgentSettings } from '@/components/settings/agent-settings'
import { useApp } from '@/lib/app-context'
import { cn } from '@/lib/utils'

type SettingsSection = 'agent' | 'profile' | 'notifications'

const SECTIONS: { id: SettingsSection; label: string; icon: React.ElementType; description: string }[] = [
  { id: 'agent', label: 'AI Agent', icon: Bot, description: 'Configure the AI intake assistant' },
  { id: 'profile', label: 'Profile', icon: User, description: 'Your account settings' },
  { id: 'notifications', label: 'Notifications', icon: Bell, description: 'Notification preferences' },
]

export default function SettingsPage() {
  const [activeSection, setActiveSection] = useState<SettingsSection>('agent')
  const { currentUser, currentRole } = useApp()

return (
    <div className="p-4 md:p-6 max-w-5xl mx-auto">
      {/* Header */}
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-foreground">Settings</h1>
        <p className="text-muted-foreground mt-1">
          Manage your account and application preferences
        </p>
      </div>

<div className="grid gap-6 lg:grid-cols-4">
        {/* Sidebar Navigation */}
        <div className="lg:col-span-1">
          <nav className="space-y-1">
            {SECTIONS.map((section) => {
              const Icon = section.icon
              const isActive = activeSection === section.id
              
              return (
                <button
                  key={section.id}
                  onClick={() => setActiveSection(section.id)}
                  className={cn(
                    'w-full flex items-center gap-3 px-3 py-2 rounded-lg text-left transition-colors',
                    isActive 
                      ? 'bg-primary text-primary-foreground' 
                      : 'text-muted-foreground hover:bg-muted hover:text-foreground'
                  )}
                >
                  <Icon className="h-4 w-4" />
                  <span className="text-sm font-medium">{section.label}</span>
                </button>
              )
            })}
          </nav>
        </div>

{/* Content */}
        <div className="lg:col-span-3">
          {activeSection === 'agent' && <AgentSettings />}

{activeSection === 'profile' && (
            <Card>
              <CardHeader>
                <CardTitle>Profile Settings</CardTitle>
                <CardDescription>
                  Your account information and preferences
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="flex items-center gap-4">
                  <div className="flex h-16 w-16 items-center justify-center rounded-full bg-primary text-primary-foreground text-xl font-semibold">
                    {currentUser.name.split(' ').map(n => n[0]).join('')}
                  </div>
                  <div>
                    <p className="font-medium text-lg">{currentUser.name}</p>
                    <p className="text-muted-foreground">{currentUser.email}</p>
                    <p className="text-sm text-muted-foreground capitalize mt-1">
                      Role: {currentRole.replace('_', ' ')}
                    </p>
                  </div>
                </div>

<div className="border-t border-border pt-6">
                  <p className="text-sm text-muted-foreground">
                    Profile editing is not available in this prototype. In production, 
                    this section would allow users to update their name, email, and avatar.
                  </p>
                </div>
              </CardContent>
            </Card>
          )}

{activeSection === 'notifications' && (
            <Card>
              <CardHeader>
                <CardTitle>Notification Preferences</CardTitle>
                <CardDescription>
                  Choose what notifications you want to receive
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label>Email Notifications</Label>
                      <p className="text-sm text-muted-foreground">
                        Receive email updates about your tickets
                      </p>
                    </div>
                    <Switch defaultChecked />
                  </div>

<div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label>Status Changes</Label>
                      <p className="text-sm text-muted-foreground">
                        Get notified when ticket status changes
                      </p>
                    </div>
                    <Switch defaultChecked />
                  </div>

<div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label>New Comments</Label>
                      <p className="text-sm text-muted-foreground">
                        Get notified when someone comments on your ticket
                      </p>
                    </div>
                    <Switch defaultChecked />
                  </div>

<div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label>Assignment Notifications</Label>
                      <p className="text-sm text-muted-foreground">
                        Get notified when you are assigned to a ticket
                      </p>
                    </div>
                    <Switch defaultChecked />
                  </div>

<div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label>Daily Summary</Label>
                      <p className="text-sm text-muted-foreground">
                        Receive a daily summary of ticket activity
                      </p>
                    </div>
                    <Switch />
                  </div>
                </div>

<div className="border-t border-border pt-6">
                  <p className="text-sm text-muted-foreground">
                    Notification settings are simulated in this prototype. 
                    Changes will not persist.
                  </p>
                </div>
              </CardContent>
            </Card>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/layout/header.tsx" isMerged="true"
'use client'

import { usePathname } from 'next/navigation'
import Link from 'next/link'
import { Menu, ChevronRight, Scale } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Switch } from '@/components/ui/switch'
import { Label } from '@/components/ui/label'
import { SidebarTrigger } from '@/components/ui/sidebar'
import { useApp } from '@/lib/app-context'
import { useState } from 'react'
import { MobileNav } from './mobile-nav'

const pageTitles: Record<string, string> = {
  '/dashboard': 'Dashboard',
  '/my-requests': 'My Requests',
  '/intake': 'New Request',
  '/tickets': 'All Tickets',
  '/settings': 'Settings',
}

export function Header() {
  const pathname = usePathname()
  const { currentRole, setCurrentRole } = useApp()
  const [mobileNavOpen, setMobileNavOpen] = useState(false)

const pageTitle = pageTitles[pathname] || ''
  const isTicketDetail = pathname.startsWith('/tickets/') && pathname !== '/tickets'
  const ticketId = isTicketDetail ? pathname.split('/').pop() : null

const handleRoleToggle = (checked: boolean) => {
    setCurrentRole(checked ? 'legal_team' : 'requester')
  }

return (
    <>
      <header className="sticky top-0 z-40 flex h-16 items-center justify-between border-b border-border bg-background px-4 md:px-6">
        <div className="flex items-center gap-3">
          {/* Desktop sidebar trigger */}
          <SidebarTrigger className="hidden md:flex" />

{/* Breadcrumb navigation */}
          <nav className="flex items-center gap-1 text-sm">
            <Link 
              href="/" 
              className="flex items-center gap-1.5 text-muted-foreground hover:text-foreground transition-colors"
            >
              <Scale className="h-4 w-4 md:hidden" />
              <span className="hidden md:inline">LegalFlow</span>
            </Link>
            {pageTitle && (
              <>
                <ChevronRight className="h-4 w-4 text-muted-foreground" />
                <span className="font-medium text-foreground">{pageTitle}</span>
              </>
            )}
            {isTicketDetail && ticketId && (
              <>
                <ChevronRight className="h-4 w-4 text-muted-foreground" />
                <span className="font-medium text-foreground">#{ticketId.slice(-3)}</span>
              </>
            )}
          </nav>
        </div>

<div className="flex items-center gap-3">
          {/* Role toggle - hidden on mobile, shown in mobile nav instead */}
          <div className="hidden md:flex items-center gap-3">
            <Label htmlFor="role-toggle" className="text-sm text-muted-foreground">
              Requester
            </Label>
            <Switch 
              id="role-toggle"
              checked={currentRole === 'legal_team'}
              onCheckedChange={handleRoleToggle}
            />
            <Label htmlFor="role-toggle" className="text-sm text-muted-foreground">
              Legal Team
            </Label>
          </div>

{/* Mobile hamburger - positioned on right for easy thumb access */}
          <Button
            variant="ghost"
            size="icon"
            className="md:hidden"
            onClick={() => setMobileNavOpen(true)}
            aria-label="Open menu"
          >
            <Menu className="h-5 w-5" />
          </Button>
        </div>
      </header>

<MobileNav open={mobileNavOpen} onOpenChange={setMobileNavOpen} />
    </>
  )
}
[V0_FILE]typescriptreact:file="components/layout/app-sidebar.tsx" isMerged="true"
'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import {
  LayoutDashboard,
  FileText,
  PlusCircle,
  Settings,
  Scale,
  FolderOpen,
} from 'lucide-react'
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarFooter,
  SidebarSeparator,
} from '@/components/ui/sidebar'
import { useApp } from '@/lib/app-context'
import { useIsMobile } from '@/hooks/use-mobile'

const legalTeamNav = [
  { title: 'Dashboard', href: '/dashboard', icon: LayoutDashboard },
  { title: 'All Tickets', href: '/tickets', icon: FolderOpen },
  { title: 'New Request', href: '/intake', icon: PlusCircle },
]

const requesterNav = [
  { title: 'My Requests', href: '/my-requests', icon: FileText },
  { title: 'New Request', href: '/intake', icon: PlusCircle },
]

export function AppSidebar() {
  const pathname = usePathname()
  const { currentRole, currentUser } = useApp()
  const isMobile = useIsMobile()

const navItems = currentRole === 'legal_team' ? legalTeamNav : requesterNav

// Don't render sidebar on mobile - we use our own MobileNav component instead
  if (isMobile) {
    return null
  }

return (
    <Sidebar>
      <SidebarHeader className="px-4 py-6">
        <Link href="/" className="flex items-center gap-2">
          <Scale className="h-7 w-7 text-sidebar-primary" />
          <span className="text-xl font-semibold text-sidebar-foreground">LegalFlow</span>
        </Link>
      </SidebarHeader>
      
      <SidebarSeparator />
      
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Navigation</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {navItems.map((item) => (
                <SidebarMenuItem key={item.href}>
                  <SidebarMenuButton 
                    asChild 
                    isActive={pathname === item.href || (item.href !== '/' && pathname.startsWith(item.href))}
                  >
                    <Link href={item.href}>
                      <item.icon className="h-4 w-4" />
                      <span>{item.title}</span>
                    </Link>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
      
      <SidebarFooter>
        <SidebarSeparator />
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton asChild isActive={pathname === '/settings'}>
              <Link href="/settings">
                <Settings className="h-4 w-4" />
                <span>Settings</span>
              </Link>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
        <div className="px-3 py-3">
          <div className="flex items-center gap-3">
            <div className="flex h-9 w-9 items-center justify-center rounded-full bg-sidebar-accent text-sidebar-accent-foreground text-sm font-medium">
              {currentUser.name.split(' ').map(n => n[0]).join('')}
            </div>
            <div className="flex flex-col">
              <span className="text-sm font-medium text-sidebar-foreground">{currentUser.name}</span>
              <span className="text-xs text-sidebar-foreground/60 capitalize">{currentRole.replace('_', ' ')}</span>
            </div>
          </div>
        </div>
      </SidebarFooter>
    </Sidebar>
  )
}
[V0_FILE]typescriptreact:file="app/tickets/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/tickets/[id]/page.tsx" isMerged="true"
'use client'

import { useState } from 'react'
import { useRouter, useParams } from 'next/navigation'
import { 
  ArrowLeft, 
  Sparkles, 
  Clock, 
  User, 
  Calendar,
  RefreshCw,
  UserPlus,
  FileText
} from 'lucide-react'
import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { TicketTimeline } from '@/components/tickets/ticket-timeline'
import { TicketComments } from '@/components/tickets/ticket-comments'
import { TicketDocuments } from '@/components/tickets/ticket-documents'
import { StatusChangeModal } from '@/components/tickets/status-change-modal'
import { useApp } from '@/lib/app-context'
import { 
  STATUS_LABELS, 
  STATUS_COLORS, 
  PRIORITY_LABELS, 
  PRIORITY_COLORS,
  REQUEST_TYPE_LABELS 
} from '@/lib/constants'
import type { TicketStatus, Comment, TimelineEvent } from '@/lib/types'
import { cn } from '@/lib/utils'

export default function TicketDetailPage() {
  const params = useParams<{ id: string }>()
  const id = params.id
  const router = useRouter()
  const { getTicketById, updateTicket, currentRole, currentUser } = useApp()
  const [statusModalOpen, setStatusModalOpen] = useState(false)

const ticket = getTicketById(id)

if (!ticket) {
    return (
      <div className="p-4 md:p-6">
        <div className="text-center py-12">
          <FileText className="h-12 w-12 mx-auto text-muted-foreground/50" />
          <h2 className="mt-4 text-lg font-medium">Ticket not found</h2>
          <p className="text-muted-foreground mt-1">
            The ticket you are looking for does not exist
          </p>
          <Button asChild className="mt-4">
            <Link href="/dashboard">Back to Dashboard</Link>
          </Button>
        </div>
      </div>
    )
  }

const formatDate = (date: Date) => {
    return new Intl.DateTimeFormat('en-US', {
      month: 'long',
      day: 'numeric',
      year: 'numeric',
      hour: 'numeric',
      minute: '2-digit',
    }).format(date)
  }

const handleStatusChange = (newStatus: TicketStatus) => {
    const newEvent: TimelineEvent = {
      id: `tl-${Date.now()}`,
      type: 'status_change',
      description: `Status changed from ${STATUS_LABELS[ticket.status]} to ${STATUS_LABELS[newStatus]}`,
      userId: currentUser.id,
      userName: currentUser.name,
      createdAt: new Date(),
    }

updateTicket(ticket.id, {
      status: newStatus,
      timeline: [...ticket.timeline, newEvent],
    })
  }

const handleAddComment = (content: string, isInternal: boolean) => {
    const newComment: Comment = {
      id: `comment-${Date.now()}`,
      content,
      authorId: currentUser.id,
      authorName: currentUser.name,
      authorRole: currentRole,
      createdAt: new Date(),
      isInternal,
    }

const newEvent: TimelineEvent = {
      id: `tl-${Date.now()}`,
      type: 'comment',
      description: isInternal ? 'Internal note added' : 'Comment added',
      userId: currentUser.id,
      userName: currentUser.name,
      createdAt: new Date(),
    }

updateTicket(ticket.id, {
      comments: [...ticket.comments, newComment],
      timeline: [...ticket.timeline, newEvent],
    })
  }

return (
    <div className="p-4 md:p-6 max-w-6xl mx-auto">
      {/* Header */}
      <div className="mb-6">
        <Button
          variant="ghost"
          size="sm"
          onClick={() => router.back()}
          className="mb-4 -ml-2"
        >
          <ArrowLeft className="h-4 w-4 mr-2" />
          Back
        </Button>

<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
          <div className="space-y-2">
            <div className="flex flex-wrap items-center gap-2">
              <Badge
                variant="secondary"
                className={cn('text-xs', STATUS_COLORS[ticket.status])}
              >
                {STATUS_LABELS[ticket.status]}
              </Badge>
              <Badge
                variant="outline"
                className={cn('text-xs', PRIORITY_COLORS[ticket.priority])}
              >
                {PRIORITY_LABELS[ticket.priority]}
              </Badge>
              <Badge variant="outline" className="text-xs">
                {REQUEST_TYPE_LABELS[ticket.requestType]}
              </Badge>
            </div>
            <h1 className="text-2xl font-bold text-foreground text-balance">
              {ticket.title}
            </h1>
          </div>

{currentRole === 'legal_team' && (
            <div className="flex gap-2 shrink-0">
              <Button variant="outline" onClick={() => setStatusModalOpen(true)}>
                <RefreshCw className="h-4 w-4 mr-2" />
                Change Status
              </Button>
            </div>
          )}
        </div>
      </div>

{/* Main Content */}
      <div className="grid gap-6 lg:grid-cols-3">
        {/* Left Column - Main Info */}
        <div className="lg:col-span-2 space-y-6">
          {/* Description */}
          <Card>
            <CardHeader>
              <CardTitle className="text-base">Description</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-foreground whitespace-pre-wrap leading-relaxed">
                {ticket.description}
              </p>
            </CardContent>
          </Card>

{/* AI Summary */}
          {ticket.aiSummary && (
            <Card className="border-primary/20 bg-primary/5">
              <CardHeader className="pb-2">
                <CardTitle className="text-base flex items-center gap-2">
                  <Sparkles className="h-4 w-4 text-primary" />
                  AI Summary
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <p className="text-sm text-foreground">{ticket.aiSummary}</p>
                {ticket.aiRecommendations && ticket.aiRecommendations.length > 0 && (
                  <div>
                    <p className="text-xs font-medium text-muted-foreground mb-2">
                      Recommendations:
                    </p>
                    <ul className="space-y-1">
                      {ticket.aiRecommendations.map((rec, i) => (
                        <li key={i} className="text-sm text-foreground flex items-start gap-2">
                          <span className="text-primary">-</span>
                          {rec}
                        </li>
                      ))}
                    </ul>
                  </div>
                )}
              </CardContent>
            </Card>
          )}

{/* Tabs for Timeline, Comments, Documents */}
          <Card>
            <CardContent className="p-0">
              <Tabs defaultValue="comments" className="w-full">
                <TabsList className="w-full justify-start rounded-none border-b bg-transparent h-auto p-0">
                  <TabsTrigger
                    value="comments"
                    className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent py-3 px-4"
                  >
                    Comments ({ticket.comments.length})
                  </TabsTrigger>
                  <TabsTrigger
                    value="timeline"
                    className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent py-3 px-4"
                  >
                    Timeline
                  </TabsTrigger>
                  <TabsTrigger
                    value="documents"
                    className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent py-3 px-4"
                  >
                    Documents ({ticket.documents.length})
                  </TabsTrigger>
                </TabsList>
                <div className="p-4">
                  <TabsContent value="comments" className="mt-0">
                    <TicketComments
                      comments={ticket.comments}
                      onAddComment={handleAddComment}
                    />
                  </TabsContent>
                  <TabsContent value="timeline" className="mt-0">
                    <TicketTimeline events={ticket.timeline} />
                  </TabsContent>
                  <TabsContent value="documents" className="mt-0">
                    <TicketDocuments documents={ticket.documents} />
                  </TabsContent>
                </div>
              </Tabs>
            </CardContent>
          </Card>
        </div>

{/* Right Column - Sidebar */}
        <div className="space-y-6">
          {/* Details Card */}
          <Card>
            <CardHeader>
              <CardTitle className="text-base">Details</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center gap-3">
                <User className="h-4 w-4 text-muted-foreground" />
                <div>
                  <p className="text-xs text-muted-foreground">Requester</p>
                  <p className="text-sm font-medium">{ticket.requesterName}</p>
                  <p className="text-xs text-muted-foreground">{ticket.requesterEmail}</p>
                </div>
              </div>

{ticket.assigneeName && (
                <div className="flex items-center gap-3">
                  <UserPlus className="h-4 w-4 text-muted-foreground" />
                  <div>
                    <p className="text-xs text-muted-foreground">Assigned To</p>
                    <p className="text-sm font-medium">{ticket.assigneeName}</p>
                  </div>
                </div>
              )}

<div className="flex items-center gap-3">
                <Calendar className="h-4 w-4 text-muted-foreground" />
                <div>
                  <p className="text-xs text-muted-foreground">Created</p>
                  <p className="text-sm">{formatDate(ticket.createdAt)}</p>
                </div>
              </div>

<div className="flex items-center gap-3">
                <Clock className="h-4 w-4 text-muted-foreground" />
                <div>
                  <p className="text-xs text-muted-foreground">Last Updated</p>
                  <p className="text-sm">{formatDate(ticket.updatedAt)}</p>
                </div>
              </div>

{ticket.dueDate && (
                <div className="flex items-center gap-3">
                  <Calendar className="h-4 w-4 text-muted-foreground" />
                  <div>
                    <p className="text-xs text-muted-foreground">Due Date</p>
                    <p className={cn(
                      'text-sm font-medium',
                      new Date(ticket.dueDate) < new Date() && 'text-destructive'
                    )}>
                      {formatDate(ticket.dueDate)}
                    </p>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>

{/* Tags */}
          {ticket.tags && ticket.tags.length > 0 && (
            <Card>
              <CardHeader>
                <CardTitle className="text-base">Tags</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="flex flex-wrap gap-2">
                  {ticket.tags.map((tag) => (
                    <Badge key={tag} variant="secondary" className="text-xs">
                      {tag}
                    </Badge>
                  ))}
                </div>
              </CardContent>
            </Card>
          )}
        </div>
      </div>

{/* Status Change Modal */}
      <StatusChangeModal
        open={statusModalOpen}
        onOpenChange={setStatusModalOpen}
        currentStatus={ticket.status}
        onStatusChange={handleStatusChange}
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/intake/page.tsx" isMerged="true"
'use client'

import React, { useState } from 'react'
import { useRouter } from 'next/navigation'
import { CheckCircle, ArrowRight, ArrowLeft, FileUp } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import { Slider } from '@/components/ui/slider'
import { IntakeChat } from '@/components/intake/intake-chat'
import { DocumentUpload } from '@/components/intake/document-upload'
import { useApp } from '@/lib/app-context'
import { REQUEST_TYPE_LABELS, REQUEST_TYPE_DESCRIPTIONS, PRIORITY_LABELS } from '@/lib/constants'
import type { RequestType, Priority, Ticket } from '@/lib/types'
import { cn } from '@/lib/utils'

const PRIORITY_ORDER: Priority[] = ['low', 'medium', 'high', 'urgent']

type IntakeStep = 'chat' | 'details' | 'review'

interface UploadedFile {
  id: string
  name: string
  size: number
  type: string
}

export default function IntakePage() {
  const router = useRouter()
  const { addTicket, currentUser } = useApp()
  const [currentStep, setCurrentStep] = useState<IntakeStep>('chat')
  const [formData, setFormData] = useState({
    title: '',
    description: '',
    requestType: '' as RequestType | '',
    priority: 'medium' as Priority,
    files: [] as UploadedFile[],
  })
  const [isSubmitting, setIsSubmitting] = useState(false)

const priorityIndex = PRIORITY_ORDER.indexOf(formData.priority)

const goToStep = (step: IntakeStep) => setCurrentStep(step)

const handlePriorityChange = (value: number[]) => {
    const newPriority = PRIORITY_ORDER[value[0]]
    setFormData({ ...formData, priority: newPriority })
  }

const handleRequestTypeSelect = (type: RequestType) => {
    if (formData.requestType === type) {
      setFormData({ ...formData, requestType: '' })
    } else {
      setFormData({ ...formData, requestType: type })
    }
  }

const handleSubmit = async () => {
    if (!formData.title || !formData.requestType) return

setIsSubmitting(true)

const newTicket: Ticket = {
      id: `ticket-${Date.now()}`,
      title: formData.title,
      description: formData.description,
      requestType: formData.requestType as RequestType,
      status: 'new',
      priority: formData.priority,
      requesterId: currentUser.id,
      requesterName: currentUser.name,
      requesterEmail: currentUser.email,
      createdAt: new Date(),
      updatedAt: new Date(),
      documents: formData.files.map((f) => ({
        id: f.id,
        name: f.name,
        size: f.size,
        type: f.type,
        uploadedAt: new Date(),
        uploadedBy: currentUser.name,
        versions: [
          {
            id: `v1-${f.id}`,
            version: 1,
            uploadedAt: new Date(),
            uploadedBy: currentUser.name,
          },
        ],
      })),
      comments: [],
      timeline: [
        {
          id: `tl-${Date.now()}`,
          type: 'created',
          description: 'Ticket created via AI intake',
          userId: currentUser.id,
          userName: currentUser.name,
          createdAt: new Date(),
        },
      ],
      aiSummary: `AI-assisted intake for ${REQUEST_TYPE_LABELS[formData.requestType as RequestType]}. ${formData.description.slice(0, 150)}...`,
      tags: [],
    }

addTicket(newTicket)

await new Promise((resolve) => setTimeout(resolve, 500))

setIsSubmitting(false)
    router.push(`/tickets/${newTicket.id}`)
  }

const isDetailsValid = formData.title && formData.requestType

// Chat step - full height conversational interface
  if (currentStep === 'chat') {
    return (
      <div className="h-[calc(100vh-4rem)] flex flex-col">
        <div className="flex-1 flex flex-col max-w-4xl mx-auto w-full min-h-0">
          <IntakeChat />
        </div>
        <div className="p-4 border-t border-border bg-card">
          <div className="max-w-4xl mx-auto flex justify-end">
            <Button onClick={() => goToStep('details')}>
              Continue to Details
              <ArrowRight className="h-4 w-4 ml-2" />
            </Button>
          </div>
        </div>
      </div>
    )
  }

// Details step - form for request info
  if (currentStep === 'details') {
    return (
      <div className="min-h-[calc(100vh-4rem)] bg-background">
        <div className="max-w-2xl mx-auto p-4 md:p-6 space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Request Details</CardTitle>
              <CardDescription>
                Please provide the details for your legal request
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="space-y-2">
                <Label htmlFor="title">Request Title *</Label>
                <Input
                  id="title"
                  placeholder="Brief title for your request"
                  value={formData.title}
                  onChange={(e) =>
                    setFormData({ ...formData, title: e.target.value })
                  }
                />
              </div>

{/* Request Type Chip Selector */}
              <div className="space-y-3">
                <Label>Request Type *</Label>
                <div className="flex flex-wrap gap-2">
                  {(Object.entries(REQUEST_TYPE_LABELS) as [RequestType, string][]).map(
                    ([value, label]) => {
                      const isSelected = formData.requestType === value
                      return (
                        <button
                          key={value}
                          type="button"
                          onClick={() => handleRequestTypeSelect(value)}
                          className={cn(
                            'px-4 py-2 rounded-full text-sm font-medium transition-all border',
                            isSelected
                              ? 'bg-primary text-primary-foreground border-primary'
                              : 'bg-card text-muted-foreground border-border hover:border-primary/50 hover:text-foreground'
                          )}
                        >
                          {label}
                        </button>
                      )
                    }
                  )}
                </div>
                {formData.requestType && (
                  <p className="text-sm text-muted-foreground">
                    {REQUEST_TYPE_DESCRIPTIONS[formData.requestType]}
                  </p>
                )}
              </div>

{/* Priority Slider */}
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <Label>Priority</Label>
                  <span
                    className={cn(
                      'text-sm font-medium px-2 py-0.5 rounded',
                      formData.priority === 'low' && 'bg-muted text-muted-foreground',
                      formData.priority === 'medium' && 'bg-primary/20 text-primary',
                      formData.priority === 'high' && 'bg-accent/20 text-accent-foreground',
                      formData.priority === 'urgent' && 'bg-destructive/20 text-destructive'
                    )}
                  >
                    {PRIORITY_LABELS[formData.priority]}
                  </span>
                </div>
                <Slider
                  value={[priorityIndex]}
                  onValueChange={handlePriorityChange}
                  max={3}
                  min={0}
                  step={1}
                  className="w-full"
                />
                <div className="flex justify-between text-xs text-muted-foreground">
                  <span>Low</span>
                  <span>Medium</span>
                  <span>High</span>
                  <span>Urgent</span>
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="description">Additional Details</Label>
                <Textarea
                  id="description"
                  placeholder="Any additional information that might be helpful..."
                  value={formData.description}
                  onChange={(e) =>
                    setFormData({ ...formData, description: e.target.value })
                  }
                  rows={4}
                />
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Documents</CardTitle>
              <CardDescription>
                Upload any relevant documents for your request
              </CardDescription>
            </CardHeader>
            <CardContent>
              <DocumentUpload
                files={formData.files}
                onFilesChange={(files) => setFormData({ ...formData, files })}
              />
            </CardContent>
          </Card>

<div className="flex justify-between pt-4">
            <Button variant="outline" onClick={() => goToStep('chat')}>
              <ArrowLeft className="h-4 w-4 mr-2" />
              Back
            </Button>
            <Button onClick={() => goToStep('review')} disabled={!isDetailsValid}>
              Review Request
              <ArrowRight className="h-4 w-4 ml-2" />
            </Button>
          </div>
        </div>
      </div>
    )
  }

// Review step - summary before submission
  return (
    <div className="min-h-[calc(100vh-4rem)] bg-background">
      <div className="max-w-2xl mx-auto p-4 md:p-6 space-y-6">
        <Card>
          <CardHeader>
            <CardTitle>Review Your Request</CardTitle>
            <CardDescription>
              Please review the details before submitting
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid gap-4 sm:grid-cols-2">
              <div>
                <p className="text-sm text-muted-foreground">Title</p>
                <p className="font-medium">{formData.title || '-'}</p>
              </div>
              <div>
                <p className="text-sm text-muted-foreground">Request Type</p>
                <p className="font-medium">
                  {formData.requestType
                    ? REQUEST_TYPE_LABELS[formData.requestType]
                    : '-'}
                </p>
              </div>
              <div>
                <p className="text-sm text-muted-foreground">Priority</p>
                <p className="font-medium">{PRIORITY_LABELS[formData.priority]}</p>
              </div>
              <div>
                <p className="text-sm text-muted-foreground">Documents</p>
                <p className="font-medium">{formData.files.length} file(s)</p>
              </div>
            </div>

{formData.description && (
              <div>
                <p className="text-sm text-muted-foreground mb-1">
                  Additional Details
                </p>
                <p className="text-sm bg-muted p-3 rounded-lg">
                  {formData.description}
                </p>
              </div>
            )}

{formData.files.length > 0 && (
              <div>
                <p className="text-sm text-muted-foreground mb-2">
                  Attached Files
                </p>
                <div className="space-y-1">
                  {formData.files.map((file) => (
                    <div
                      key={file.id}
                      className="text-sm flex items-center gap-2 text-muted-foreground"
                    >
                      <FileUp className="h-4 w-4" />
                      {file.name}
                    </div>
                  ))}
                </div>
              </div>
            )}
          </CardContent>
        </Card>

<div className="flex justify-between pt-4">
          <Button variant="outline" onClick={() => goToStep('details')}>
            <ArrowLeft className="h-4 w-4 mr-2" />
            Back
          </Button>
          <Button onClick={handleSubmit} disabled={isSubmitting}>
            {isSubmitting ? (
              <>
                <span className="animate-spin mr-2">...</span>
                Submitting...
              </>
            ) : (
              <>
                Submit Request
                <CheckCircle className="h-4 w-4 ml-2" />
              </>
            )}
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="lib/constants.ts" isMerged="true"
import type { RequestType, TicketStatus, Priority } from './types'

export const REQUEST_TYPE_LABELS: Record<RequestType, string> = {
  contract_review: 'Contract Review',
  nda: 'NDA',
  compliance: 'Compliance',
  ip: 'Intellectual Property',
  employment: 'Employment',
  other: 'Other',
}

export const REQUEST_TYPE_DESCRIPTIONS: Record<RequestType, string> = {
  contract_review: 'Review and approval of business contracts',
  nda: 'Non-disclosure agreement requests',
  compliance: 'Regulatory and compliance matters',
  ip: 'Patents, trademarks, and intellectual property',
  employment: 'Employment agreements and HR legal matters',
  other: 'General legal inquiries',
}

export const STATUS_LABELS: Record<TicketStatus, string> = {
  new: 'New',
  in_review: 'In Review',
  pending_info: 'Pending Info',
  approved: 'Approved',
  rejected: 'Rejected',
  completed: 'Completed',
}

export const STATUS_COLORS: Record<TicketStatus, string> = {
  new: 'bg-status-new text-white',
  in_review: 'bg-status-in-review text-accent-foreground',
  pending_info: 'bg-status-pending text-accent-foreground',
  approved: 'bg-status-approved text-white',
  rejected: 'bg-status-rejected text-white',
  completed: 'bg-status-completed text-white',
}

export const PRIORITY_LABELS: Record<Priority, string> = {
  low: 'Low',
  medium: 'Medium',
  high: 'High',
  urgent: 'Urgent',
}

export const PRIORITY_COLORS: Record<Priority, string> = {
  low: 'bg-muted text-muted-foreground',
  medium: 'bg-primary/20 text-primary',
  high: 'bg-accent/20 text-accent-foreground',
  urgent: 'bg-destructive/20 text-destructive',
}

export const KANBAN_COLUMNS: TicketStatus[] = [
  'new',
  'in_review',
  'pending_info',
  'approved',
  'completed',
]

export const DEFAULT_AGENT_CONFIG = {
  model: 'anthropic/claude-opus-4-20250514',
  temperature: 0.7,
  maxTokens: 4096,
  systemPrompt: `You are LegalFlow AI, an intelligent legal intake assistant. Your role is to:

1. Help users submit legal requests by asking relevant questions
2. Gather all necessary information for the legal team
3. Identify the type of legal matter and appropriate priority
4. Collect required documents and context
5. Generate clear summaries for the legal team

Be professional, empathetic, and thorough. Ask one question at a time and guide users through the process step by step.`,
  tools: ['document_analysis', 'priority_assessment', 'ticket_creation'],
}

export const AVAILABLE_MODELS = [
  { value: 'anthropic/claude-opus-4-20250514', label: 'Claude 4.5 Opus' },
  { value: 'anthropic/claude-sonnet-4-20250514', label: 'Claude Sonnet 4' },
  { value: 'anthropic/claude-3-5-haiku-20241022', label: 'Claude 3.5 Haiku' },
  { value: 'openai/gpt-4o', label: 'GPT-4o' },
  { value: 'openai/gpt-4o-mini', label: 'GPT-4o Mini' },
]

export const AVAILABLE_TOOLS = [
  { id: 'document_analysis', label: 'Document Analysis', description: 'Analyze uploaded documents for key terms and clauses' },
  { id: 'priority_assessment', label: 'Priority Assessment', description: 'Automatically assess request priority based on content' },
  { id: 'ticket_creation', label: 'Ticket Creation', description: 'Create and submit tickets on behalf of users' },
  { id: 'similar_cases', label: 'Similar Cases', description: 'Find similar past cases for reference' },
]
[V0_FILE]typescriptreact:file="components/settings/agent-settings.tsx" isMerged="true"
'use client'

import { useState } from 'react'
import { Save, RotateCcw, Sparkles } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import { Slider } from '@/components/ui/slider'
import { Checkbox } from '@/components/ui/checkbox'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { useApp } from '@/lib/app-context'
import { AVAILABLE_MODELS, AVAILABLE_TOOLS, DEFAULT_AGENT_CONFIG } from '@/lib/constants'

export function AgentSettings() {
  const { agentConfig, setAgentConfig } = useApp()
  const [localConfig, setLocalConfig] = useState(agentConfig)
  const [hasChanges, setHasChanges] = useState(false)

const handleChange = <K extends keyof typeof localConfig>(
    key: K,
    value: typeof localConfig[K]
  ) => {
    setLocalConfig({ ...localConfig, [key]: value })
    setHasChanges(true)
  }

const handleToolToggle = (toolId: string) => {
    const newTools = localConfig.tools.includes(toolId)
      ? localConfig.tools.filter(t => t !== toolId)
      : [...localConfig.tools, toolId]
    handleChange('tools', newTools)
  }

const handleSave = () => {
    setAgentConfig(localConfig)
    setHasChanges(false)
  }

const handleReset = () => {
    setLocalConfig(DEFAULT_AGENT_CONFIG)
    setHasChanges(true)
  }

return (
    <div className="space-y-6">
      {/* Architecture Overview */}
      <Card className="border-primary/20 bg-primary/5">
        <CardHeader>
          <CardTitle className="text-base flex items-center gap-2">
            <Sparkles className="h-4 w-4 text-primary" />
            How the AI Agent Works
          </CardTitle>
        </CardHeader>
        <CardContent className="text-sm text-muted-foreground space-y-3">
          <p>
            The intake assistant uses a large language model (LLM) to have a natural conversation 
            with users about their legal requests. When a user describes their needs, the AI:
          </p>
          <ol className="list-decimal list-inside space-y-1 ml-2">
            <li>Analyzes the request to understand the type of legal help needed</li>
            <li>Asks clarifying questions to gather complete information</li>
            <li>Extracts structured data (request type, priority, deadlines) from the conversation</li>
            <li>Pre-fills the ticket details form based on what it learned</li>
          </ol>
          <p>
            The settings below control how the AI behaves during this process. Changes affect 
            all new intake conversations but not existing tickets.
          </p>
        </CardContent>
      </Card>

{/* Model Selection */}
      <Card>
        <CardHeader>
          <CardTitle className="text-base">Model Selection</CardTitle>
          <CardDescription>
            Choose which AI model powers the intake assistant
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="space-y-2">
            <Label>Model</Label>
            <Select
              value={localConfig.model}
              onValueChange={(value) => handleChange('model', value)}
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {AVAILABLE_MODELS.map((model) => (
                  <SelectItem key={model.value} value={model.value}>
                    {model.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <p className="text-xs text-muted-foreground">
              Claude Opus is best for complex reasoning. Sonnet balances speed and quality. 
              Haiku is fastest but less nuanced. GPT models offer alternative perspectives.
            </p>
          </div>

<div className="space-y-3">
            <div className="flex items-center justify-between">
              <Label>Temperature</Label>
              <span className="text-sm font-mono bg-muted px-2 py-0.5 rounded">
                {localConfig.temperature.toFixed(1)}
              </span>
            </div>
            <Slider
              value={[localConfig.temperature]}
              onValueChange={([value]) => handleChange('temperature', value)}
              min={0}
              max={1}
              step={0.1}
              className="w-full"
            />
            <p className="text-xs text-muted-foreground">
              Controls randomness in responses. <strong>0.0-0.3:</strong> Precise, consistent answers 
              (best for legal intake). <strong>0.4-0.7:</strong> Balanced creativity. <strong>0.8-1.0:</strong> More 
              varied, creative responses (not recommended for legal work).
            </p>
          </div>

<div className="space-y-2">
            <Label>Max Output Tokens</Label>
            <Select
              value={localConfig.maxTokens.toString()}
              onValueChange={(value) => handleChange('maxTokens', parseInt(value))}
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="1024">1,024 tokens (~750 words)</SelectItem>
                <SelectItem value="2048">2,048 tokens (~1,500 words)</SelectItem>
                <SelectItem value="4096">4,096 tokens (~3,000 words)</SelectItem>
                <SelectItem value="8192">8,192 tokens (~6,000 words)</SelectItem>
              </SelectContent>
            </Select>
            <p className="text-xs text-muted-foreground">
              Limits the length of each AI response. A "token" is roughly 3/4 of a word. 
              This controls the <em>output</em> only - not how much the AI can read or understand. 
              For intake conversations, 2,048 tokens is usually sufficient. Increase if the AI 
              is cutting off mid-sentence or if you need longer explanations.
            </p>
          </div>
        </CardContent>
      </Card>

{/* System Prompt */}
      <Card>
        <CardHeader>
          <CardTitle className="text-base">System Prompt</CardTitle>
          <CardDescription>
            Instructions that guide the AI assistant's behavior and responses
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Textarea
            value={localConfig.systemPrompt}
            onChange={(e) => handleChange('systemPrompt', e.target.value)}
            rows={12}
            className="font-mono text-sm"
          />
        </CardContent>
      </Card>

{/* Tools & Capabilities */}
      <Card>
        <CardHeader>
          <CardTitle className="text-base">Tools & Capabilities</CardTitle>
          <CardDescription>
            Enable or disable specific AI capabilities
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {AVAILABLE_TOOLS.map((tool) => (
              <div key={tool.id} className="flex items-start space-x-3">
                <Checkbox
                  id={tool.id}
                  checked={localConfig.tools.includes(tool.id)}
                  onCheckedChange={() => handleToolToggle(tool.id)}
                />
                <div className="space-y-1">
                  <Label
                    htmlFor={tool.id}
                    className="font-medium cursor-pointer"
                  >
                    {tool.label}
                  </Label>
                  <p className="text-sm text-muted-foreground">
                    {tool.description}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

{/* Actions */}
      <div className="flex items-center justify-between pt-4">
        <Button variant="outline" onClick={handleReset}>
          <RotateCcw className="h-4 w-4 mr-2" />
          Reset to Defaults
        </Button>
        <Button onClick={handleSave} disabled={!hasChanges}>
          <Save className="h-4 w-4 mr-2" />
          Save Changes
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/intake/intake-chat.tsx" isMerged="true"
'use client'

import React from "react"

import { useState, useRef, useEffect } from 'react'
import { useChat } from '@ai-sdk/react'
import { DefaultChatTransport } from 'ai'
import { Send, Sparkles, User, Loader2, Copy, Check } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Textarea } from '@/components/ui/textarea'
import { cn } from '@/lib/utils'
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip'

interface IntakeChatProps {
  onTicketReady?: (summary: string) => void
}

export function IntakeChat({ onTicketReady }: IntakeChatProps) {
  const [input, setInput] = useState('')
  const [copied, setCopied] = useState(false)
  const messagesEndRef = useRef<HTMLDivElement>(null)
  const textareaRef = useRef<HTMLTextAreaElement>(null)

const { messages, sendMessage, status } = useChat({
    transport: new DefaultChatTransport({ api: '/api/intake' }),
    initialMessages: [
      {
        id: 'welcome',
        role: 'assistant',
        parts: [
          {
            type: 'text',
            text: "Hello! I'm here to help you submit a legal request. I'll ask you a few questions to make sure the legal team has all the information they need.\n\nWhat type of legal matter can I help you with today?",
          },
        ],
      },
    ],
  })

const isLoading = status === 'streaming' || status === 'submitted'

// Auto-scroll to bottom when new messages arrive
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
  }, [messages])

// Auto-resize textarea
  useEffect(() => {
    if (textareaRef.current) {
      textareaRef.current.style.height = 'auto'
      textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 150)}px`
    }
  }, [input])

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (!input.trim() || isLoading) return
    sendMessage({ text: input })
    setInput('')
  }

const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault()
      handleSubmit(e)
    }
  }

const getMessageText = (message: typeof messages[0]) => {
    return message.parts
      ?.filter((p): p is { type: 'text'; text: string } => p.type === 'text')
      .map((p) => p.text)
      .join('') || ''
  }

const copyConversation = async () => {
    const transcript = messages
      .map((msg) => {
        const role = msg.role === 'assistant' ? 'ASSISTANT' : 'USER'
        const text = getMessageText(msg)
        return `[${role}]\n${text}`
      })
      .join('\n\n---\n\n')

const fullText = `# Intake Chat Transcript\n\n${transcript}`

try {
      await navigator.clipboard.writeText(fullText)
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    } catch (err) {
      console.error('Failed to copy:', err)
    }
  }

return (
    <TooltipProvider>
      <div className="flex flex-col h-full">
        {/* Copy button */}
        {messages.length > 1 && (
          <div className="flex justify-end px-4 pt-2">
            <Tooltip>
              <TooltipTrigger asChild>
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={copyConversation}
                  className="text-muted-foreground hover:text-foreground"
                >
                  {copied ? (
                    <>
                      <Check className="h-4 w-4 mr-1.5" />
                      Copied
                    </>
                  ) : (
                    <>
                      <Copy className="h-4 w-4 mr-1.5" />
                      Copy chat
                    </>
                  )}
                </Button>
              </TooltipTrigger>
              <TooltipContent>
                <p>Copy full conversation for debugging</p>
              </TooltipContent>
            </Tooltip>
          </div>
        )}

{/* Messages */}
        <div className="flex-1 overflow-y-auto p-4 space-y-4">
          {messages.map((message) => {
            const isAssistant = message.role === 'assistant'
            const text = getMessageText(message)

return (
              <div
                key={message.id}
                className={cn(
                  'flex gap-3 max-w-[85%]',
                  isAssistant ? 'mr-auto' : 'ml-auto flex-row-reverse'
                )}
              >
                <div
                  className={cn(
                    'flex h-8 w-8 shrink-0 items-center justify-center rounded-full',
                    isAssistant
                      ? 'bg-primary text-primary-foreground'
                      : 'bg-muted text-muted-foreground'
                  )}
                >
                  {isAssistant ? (
                    <Sparkles className="h-4 w-4" />
                  ) : (
                    <User className="h-4 w-4" />
                  )}
                </div>
                <div
                  className={cn(
                    'rounded-2xl px-4 py-2.5',
                    isAssistant
                      ? 'bg-muted text-foreground rounded-tl-none'
                      : 'bg-primary text-primary-foreground rounded-tr-none'
                  )}
                >
                  <p className="text-sm whitespace-pre-wrap leading-relaxed">{text}</p>
                </div>
              </div>
            )
          })}

{isLoading && messages[messages.length - 1]?.role === 'user' && (
            <div className="flex gap-3 max-w-[85%]">
              <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground">
                <Sparkles className="h-4 w-4" />
              </div>
              <div className="rounded-2xl rounded-tl-none bg-muted px-4 py-2.5">
                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                  <Loader2 className="h-4 w-4 animate-spin" />
                  <span>Thinking...</span>
                </div>
              </div>
            </div>
          )}

{/* Input */}
        <div className="border-t border-border p-4">
          <form onSubmit={handleSubmit} className="flex gap-2">
            <Textarea
              ref={textareaRef}
              value={input}
              onChange={(e) => setInput(e.target.value)}
              onKeyDown={handleKeyDown}
              placeholder="Type your message..."
              disabled={isLoading}
              className="min-h-[44px] max-h-[150px] resize-none"
              rows={1}
            />
            <Button
              type="submit"
              size="icon"
              disabled={!input.trim() || isLoading}
              className="shrink-0 h-11 w-11"
            >
              <Send className="h-4 w-4" />
              <span className="sr-only">Send message</span>
            </Button>
          </form>
          <p className="text-xs text-muted-foreground mt-2 text-center">
            Press Enter to send, Shift+Enter for new line
          </p>
        </div>
      </div>
    </TooltipProvider>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/ticket-card.tsx" isMerged="true"
'use client'

import Link from 'next/link'
import { Calendar, User, FileText, Sparkles } from 'lucide-react'
import { Card, CardContent, CardHeader } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import type { Ticket } from '@/lib/types'
import { 
  STATUS_LABELS, 
  STATUS_COLORS, 
  PRIORITY_LABELS, 
  PRIORITY_COLORS,
  REQUEST_TYPE_LABELS 
} from '@/lib/constants'
import { cn } from '@/lib/utils'

interface TicketCardProps {
  ticket: Ticket
  compact?: boolean
}

export function TicketCard({ ticket, compact = false }: TicketCardProps) {
  const formatDate = (date: Date) => {
    return new Intl.DateTimeFormat('en-US', {
      month: 'short',
      day: 'numeric',
    }).format(date)
  }

const formatRelativeTime = (date: Date) => {
    const now = new Date()
    const diff = now.getTime() - date.getTime()
    const hours = Math.floor(diff / (1000 * 60 * 60))
    const days = Math.floor(hours / 24)

if (hours < 1) return 'Just now'
    if (hours < 24) return `${hours}h ago`
    if (days < 7) return `${days}d ago`
    return formatDate(date)
  }

if (compact) {
    return (
      <Link href={`/tickets/${ticket.id}`}>
        <Card className="hover:border-primary/50 hover:shadow-sm transition-all cursor-pointer shadow-xs">
          <CardContent className="p-3.5">
            <div className="flex items-start justify-between gap-2">
              <div className="flex-1 min-w-0">
                <p className="font-medium text-sm truncate">{ticket.title}</p>
                <p className="text-xs text-muted-foreground mt-0.5">
                  {REQUEST_TYPE_LABELS[ticket.requestType]}
                </p>
              </div>
              <Badge 
                variant="secondary" 
                className={cn('text-xs shrink-0', PRIORITY_COLORS[ticket.priority])}
              >
                {PRIORITY_LABELS[ticket.priority]}
              </Badge>
            </div>
          </CardContent>
        </Card>
      </Link>
    )
  }

return (
    <Link href={`/tickets/${ticket.id}`}>
      <Card className="hover:border-primary/50 hover:shadow-md transition-all cursor-pointer group">
        <CardHeader className="pb-2">
          <div className="flex items-start justify-between gap-3">
            <div className="flex-1 min-w-0">
              <div className="flex items-center gap-2 mb-1">
                <Badge 
                  variant="secondary" 
                  className={cn('text-xs', STATUS_COLORS[ticket.status])}
                >
                  {STATUS_LABELS[ticket.status]}
                </Badge>
                <Badge 
                  variant="outline" 
                  className={cn('text-xs', PRIORITY_COLORS[ticket.priority])}
                >
                  {PRIORITY_LABELS[ticket.priority]}
                </Badge>
              </div>
              <h3 className="font-semibold text-foreground group-hover:text-primary transition-colors line-clamp-2">
                {ticket.title}
              </h3>
            </div>
          </div>
        </CardHeader>
        <CardContent className="pt-0">
          <p className="text-sm text-muted-foreground line-clamp-2 mb-3">
            {ticket.description}
          </p>
          
          {ticket.aiSummary && (
            <div className="flex items-start gap-2 p-2 rounded-md bg-primary/5 border border-primary/10 mb-3">
              <Sparkles className="h-4 w-4 text-primary shrink-0 mt-0.5" />
              <p className="text-xs text-muted-foreground line-clamp-2">
                {ticket.aiSummary}
              </p>
            </div>
          )}
          
          <div className="flex items-center justify-between text-xs text-muted-foreground">
            <div className="flex items-center gap-3">
              <div className="flex items-center gap-1">
                <User className="h-3.5 w-3.5" />
                <span>{ticket.requesterName}</span>
              </div>
              {ticket.documents.length > 0 && (
                <div className="flex items-center gap-1">
                  <FileText className="h-3.5 w-3.5" />
                  <span>{ticket.documents.length}</span>
                </div>
              )}
            </div>
            <div className="flex items-center gap-1">
              <Calendar className="h-3.5 w-3.5" />
              <span>{formatRelativeTime(ticket.createdAt)}</span>
            </div>
          </div>
          
          {ticket.dueDate && (
            <div className={cn(
              "mt-2 text-xs font-medium",
              new Date(ticket.dueDate) < new Date() ? "text-destructive" : "text-muted-foreground"
            )}>
              Due: {formatDate(ticket.dueDate)}
            </div>
          )}
        </CardContent>
      </Card>
    </Link>
  )
}
[V0_FILE]markdown:file="README.md" isMerged="true"
# LegalFlow

AI-powered legal intake and ticket management system. Built with Next.js 16, Tailwind CSS, shadcn/ui, and the Vercel AI SDK 6.

## What It Does

LegalFlow replaces email/Slack-based legal request workflows with a structured system. Business users describe what they need in plain language to an AI assistant, which guides them through intake, extracts structured data, and creates a ticket for the legal team.

Two roles exist in the app, toggled via a switch in the header:

- **Requester** -- submits and tracks their own legal requests
- **Legal Team** -- triages, reviews, and manages all incoming tickets

## Architecture

```
app/
  page.tsx                  # Root redirect based on role
  dashboard/page.tsx        # Legal team overview with Kanban + stats
  my-requests/page.tsx      # Requester view of their own tickets
  intake/page.tsx           # AI-guided intake wizard (chat -> details -> review)
  tickets/page.tsx          # Filterable ticket list (legal team)
  tickets/[id]/page.tsx     # Ticket detail with timeline, comments, documents
  settings/page.tsx         # Agent config, notification prefs, general settings
  api/intake/route.ts       # AI chat endpoint (Vercel AI SDK 6 + AI Gateway)

components/
  layout/                   # Sidebar, header with breadcrumbs, mobile nav
  dashboard/                # Ticket cards, Kanban board, status chip filters
  intake/                   # Chat interface, document upload
  tickets/                  # Timeline, comments, documents, status change modal
  settings/                 # Agent configuration panel

lib/
  types.ts                  # TypeScript types for Ticket, User, AgentConfig, etc.
  constants.ts              # Labels, colors, model list, default agent config
  mock-data.ts              # Seed data (8 tickets across various statuses)
  app-context.tsx           # Global state via React Context
```

## Key Features

### AI Intake Wizard
Three-step flow: conversational chat with the AI agent, manual details refinement (request type chips, priority slider, document upload), and a review screen before submission. The chat includes a "Copy chat" button to export the full transcript for debugging agent behavior.

### Kanban Dashboard
Legal team sees tickets organized by status in draggable columns. Chip-style filters let you narrow by status -- clicking a selected chip deselects it back to the default "all" view. Quick stats at the top show counts by status.

### Ticket Detail
Full ticket view with tabbed sections for timeline, comments (with internal notes visible only to legal team), and document versioning. Legal team members can change ticket status through a modal dialog.

### Agent Configuration
Settings page exposes model selection (defaults to Claude 4.5 Opus), temperature slider with range guidance, max output tokens with word-count approximations, system prompt editor, and tool capability toggles. An architecture overview card explains what each setting does and how the agent works.

### Responsive Design
Desktop uses a dark sidebar with light content area. On mobile, the sidebar is replaced entirely by a full-screen nav that slides in from the right, triggered by a hamburger button on the right side of the header.

## Data Layer

Currently uses React Context with in-memory mock data (no database). The mock data includes 8 pre-populated tickets across different statuses, types, and priorities. All state mutations (creating tickets, adding comments, changing status) update in real-time through context.

To add persistence, replace the context layer with a database integration (Supabase, Neon, etc.) and move mutations to server actions.

## AI Integration

The intake chat uses the Vercel AI SDK 6 with the Vercel AI Gateway. The API route at `/api/intake/route.ts` calls `streamText` with the configured model and system prompt. No provider API keys are needed for supported gateway models (Anthropic, OpenAI, etc.).

Agent settings (model, temperature, max tokens, system prompt, enabled tools) are stored in the app context and can be modified from the Settings page.

### Available Models

| Model | Best For |
|-------|----------|
| Claude 4.5 Opus (default) | Complex reasoning, nuanced legal understanding |
| Claude Sonnet 4 | Balanced speed and quality |
| Claude 3.5 Haiku | Fastest responses, simpler requests |
| GPT-4o | Alternative perspective, broad knowledge |
| GPT-4o Mini | Budget-friendly, quick tasks |

## Running Locally

```bash
npx shadcn@latest init
npm run dev
```

Or deploy directly to Vercel via the "Publish" button.

## Tech Stack

- **Framework**: Next.js 16 (App Router)
- **Styling**: Tailwind CSS v4 + shadcn/ui
- **AI**: Vercel AI SDK 6 via Vercel AI Gateway
- **State**: React Context (in-memory)
- **Language**: TypeScript
[V0_FILE]png:file="public/og-image.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/preview-nFs5QYfdhgUnek5v9VDkRgRavQNQPM.png" isMerged="true"
[V0_FILE]png:file="public/apple-touch-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/apple-touch-icon-oqflioo9dnUQnGtGuDhEKdsSPSAC1u.png" isMerged="true"
[V0_FILE]png:file="public/icon-512.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/icon-512-TzuqaW8sAc4zx8idWLZuHEYy7D7oxC.png" isMerged="true"
[V0_FILE]png:file="public/favicon-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/favicon-32x32-V8DAcHaiSz7UxaITW5Ut9e2xmYLjZ1.png" isMerged="true"
[V0_FILE]png:file="public/favicon-16x16.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/favicon-16x16-9FQmKsiAj18LpyEMM5axZFZA67enML.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/layout.tsx"
import React from "react"
import type { Metadata } from 'next'
import { Geist, Geist_Mono } from 'next/font/google'
import { Analytics } from '@vercel/analytics/next'
import './globals.css'
import { SidebarProvider, SidebarInset } from '@/components/ui/sidebar'
import { AppSidebar } from '@/components/layout/app-sidebar'
import { Header } from '@/components/layout/header'
import { AppProvider } from '@/lib/app-context'

const _geist = Geist({ subsets: ['latin'] })
const _geistMono = Geist_Mono({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'LegalFlow',
  description: 'AI-powered legal intake and ticket management system with Kanban dashboard, conversational intake wizard, and configurable AI agents.',
  metadataBase: new URL('https://legalflow.vercel.app'),
  openGraph: {
    title: 'LegalFlow',
    description: 'AI-powered legal intake and ticket management system with Kanban dashboard, conversational intake wizard, and configurable AI agents.',
    url: '/',
    siteName: 'LegalFlow',
    images: [
      {
        url: '/og-image.png',
        width: 1200,
        height: 630,
        alt: 'LegalFlow - AI-powered legal intake with Kanban board',
      },
    ],
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'LegalFlow',
    description: 'AI-powered legal intake and ticket management system with Kanban dashboard, conversational intake wizard, and configurable AI agents.',
    images: ['/og-image.png'],
  },
  icons: {
    icon: [
      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
      { url: '/icon-512.png', sizes: '512x512', type: 'image/png' },
    ],
    apple: '/apple-touch-icon.png',
  },
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className="font-sans antialiased">
        <AppProvider>
          <SidebarProvider>
            <AppSidebar />
            <SidebarInset>
              <Header />
              <main className="flex-1 overflow-auto">
                {children}
              </main>
            </SidebarInset>
          </SidebarProvider>
        </AppProvider>
        <Analytics />
      </body>
    </html>
  )
}84:["$","$L8c",null,{"chatId":"s8jZnpmRyTA","children":["$","$L8d",null,{"data":{"@\"active-block\",\"s8jZnpmRyTA\",":{"id":"b_Cc5kImLy8mW","messageId":"5H79TvkG0OjoZEtFnobGKlRknrvJaPCj","source":"$8e","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"Code","type":"code-project","taskNameActive":"Updating metadata","taskNameComplete":"Updated metadata"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"s8jZnpmRyTA\",":false,"":null},"children":"$L8f"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More from rcrades

More Templates Like This